Question

我正在为iPad创建一个小小的Web应用程序，我有几个元素，我阻止用户滚动，防止touchmove事件的默认值。但是，我需要用户能够滚动子元素。

我试过使用e.stopPropagation（）;但没有运气！我还尝试检测手指下的元素并放入e.preventDefault（）;在if语句中，但再次，没有运气。或者也许我只是混淆了......

有什么想法吗？从#fix div中删除.scroll div是最后的手段，因为它会引起各种麻烦。

修改

我设法对它进行排序。好像我不明白使用.stopPropagation（）;糟糕！

工作代码：

<div id="fix">

    <h1>Hi there</h1>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

    <div class="scroll">
        <ul>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
        </ul>
    </div>

</div>

和Javascript：

$('body').delegate('#fix','touchmove',function(e){

    e.preventDefault();

}).delegate('.scroll','touchmove',function(e){

    e.stopPropagation();

});

Answer 1

试试这个：

$('#fix').on('touchmove',function(e){
    if(!$('.scroll').has($(e.target)).length)
        e.preventDefault();
});

<强> EDITED

e.target包含触摸事件的最终目标节点。您可以停止所有不会“冒充”.scroll divs的事件。

我认为有更好的解决方案，但这个必须没问题。

Answer 2

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
document.getElementById('inner-scroll').addEventListener('touchmove', function(e){e.stopPropagation()}, false);

这个想法是你的主卷轴总是（由你自行决定）被禁用，但在你的内部滚动中你可以防止事件冒泡（或传播），所以它永远不会到达第一个事件监听器，这最终会取消touchmove活动。

我希望这就是你要找的东西。我有一个类似于你的情况，主要滚动在平板电脑上禁用，但我想要一个内部滚动工作。这似乎可以完成这项工作。

Answer 3

我找到了另一个使用css-classes和document.ontouchmove的解决方案。我正在开发一个带有滑块的IPad Webapp，并希望在有touchmove事件时阻止所有其他元素反弹。这是我作为摘要的解决方案：

HTML：

<body>
  <div id="outterFrame" class="fullscreen"> <!-- class fullscreen is self-explaining I guess -->
      <div id="touchmove_enabled class="enable_touchmove sliderbutton">Button</div>
  </div>
</body>

使用Javascript：

/* preventDefault on touchmove events per default */
document.ontouchmove = function(event)
{
   var sourceElement = event.target || event.srcElement;
   if(!hasClass(sourceElement,"enable_touchmove"))
{
   e.preventDefault();
}
};

/* helper method "hasClass" */
function hasClass(element,class)
{
if(element.className != null)
{
    return element.className.match(new RegExp('(\\s|^)'+class+'(\\s|$)'));
}
return false;
}

现在，只触发div“touchmove_enabled”的touchmove事件。

可能我的解决方案可能对某人有用。帕特里克

防止在父级而非子级上的touchmove默认值

3 个答案: