子iframe没有收到触摸事件

问题描述

我有如下代码；

<div id=\"scroller\" style=\"width: 50%; overflow: auto;\"> 
            <iframe height=\"100%\" id=\"iframe\" scrolling=\"no\" width=\"100%\" id=\"iframe\" src=\"responses.html\" /> 
        </div> 

现在，我希望iframe数据表在iPad的主页中滚动。 我在iframe页面上使用了js来监听触摸事件touchstart，touchmove等 但是由于某些原因，这些事件从未在iPad上触发。 我也尝试过

var startY = 0;
    var startX = 0;
    document.addEventListener(\"touchstart\",function (event) {
    alert(11);
        parent.window.scrollTo(0,1);
        startY = event.targetTouches[0].pageY;
        startX = event.targetTouches[0].pageX;
    });
    document.addEventListener(\"touchmove\",function (event) {
        event.preventDefault();
        var posy = event.targetTouches[0].pageY;
        var h = parent.document.getElementById(\"scroller\");
        var sty = h.scrollTop;
        var posx = event.targetTouches[0].pageX;
        var stx = h.scrollLeft;
        h.scrollTop = sty - (posy - startY);
        h.scrollLeft = stx - (posx - startX);
        startY = posy;
        startX = posx;
    });

请你帮助我好吗。谢谢...     

解决方法

1）从iframe中取出重复的“ 2”标签：

<iframe height=\"100%\" id=\"iframe\" scrolling=\"no\" width=\"100%\" src=\"responses.html\" />

2）添加到您的CSS：

#scroller {
z-index:-1;
}

#iframe {
z-index:1;
}

看看是否有效果。如果没有，您可以随时使用AJAX。 确保页面上包含jquery，然后：

<script>    
$.ajax({
      url: \"responses.html\",cache: false,success: function(html){
        $(\"#results\").append(html);
      }
    });
</script>

<div id=\"results\" height=\"100%\" width=\"100%\"></div>