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

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 div中"冒泡"的事件.

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

Answer 2

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

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

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

Answer 3

这应该工作:

$(document).on('touchmove', function(e) {
    if (!$(e.target).parents('.scroll')[0]) {
        e.preventDefault();
    }
});