javascript - 防止父项默认触摸移动，但子项不默认

Question

我正在为 iPad 创建一个小型网络应用程序，并且我有几个元素，我通过阻止 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();
});

已编辑

e.target 包含触摸事件的最终目标节点。您可以停止所有未在 .scroll div 中“冒泡”的事件。

我认为还有更好的解决方案，但这个一定可以。