防止在父级而非子级上触摸移动默认值 [英] Prevent touchmove default on parent but not child

问题描述

我正在为iPad创建一个小小的Web应用程序，我有几个元素阻止用户滚动，因为它阻止了touchmove事件的默认设置。但是，我有一种情况，我需要用户能够滚动子元素。

I am creating a little web app for the iPad and I've got several elements I am preventing the user from scrolling by preventing default on the touchmove event. However, I have a situation where I need the user to be able to scroll a child element.

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

I have tried to use e.stopPropagation(); but no luck! I also attempted to detect the element under the finger and put the e.preventDefault(); inside an if statement, but again, no luck. Or maybe I was just getting mixed up...

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

Any ideas? Removing the .scroll divs from the #fix div is a last resort really as it will cause all sorts of headaches.

编辑

我设法对其进行排序。好像我不明白使用.stopPropagation（）;哎呀！

I managed to sort it. Seems like I didn't understand the use of .stopPropagation(); oops!

工作代码：

<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：

And the Javascript:

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

    e.preventDefault();

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

    e.stopPropagation();

});

推荐答案

试试这个：

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

已编辑

e.target包含触摸事件的最终目标节点。你可以停止所有没有冒泡你的.scroll div的事件。

e.target contains the final target node of the touch event. You can stop all events that are not "bubbling accross" your .scroll divs.

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

I think there are better solutions, but this one must be ok.

这篇关于防止在父级而非子级上触摸移动默认值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！