javascript - 向父级已禁用事件的子级添加事件监听器

Question

这里很奇怪。早些时候，我曾尝试阻止我正在构建的 iOS Web 应用程序中的默认 touchmove 行为。添加事件监听器并防止传播很容易，但我需要将默认行为添加回其子级之一。据我了解，由于父级被禁用，子级将永远不会注册该事件。

所以我需要一个解决方案。

本质上，需要进行大量的滑动操作，因此需要取消默认的 body 滚动行为。滑动时页面滑动令人恼火。当然，我必须将事件监听器添加到外部容器。无法避免。

如何向其中一个子项添加回默认的浏览器控制行为？我不想用我自己的物理知识来伪造它。

感谢您的帮助。

HTML:

<div id="mainPanel"> <!-- add event listener and preventDefault(); -->
    <div id="nonScrollingPanel></div>
    <div id="scrollingPanel></div> <!-- add event listener and re-enable default -->
</div>

JavaScript:

$bod.on('touchmove', '#mainPanel', function(event){

    event.preventDefault();
});

$('#mainPanel').on('touchmove', '#scrollingPanel', function(){

    return true;
});

Answer 1

这不能按您的预期工作的原因是 jQuery 运行所有事件处理程序，除非您停止其中之一的传播。在您的示例中，两个事件处理程序都将运行。

这是一个解决方案，我不喜欢它，因为您实际上可能希望该事件出于其他目的而传播。

$('#main-panel').on('touchmove', function(e) {
    e.preventDefault();
});

$('#scrolling-panel').on('touchmove', function(e) {
    e.stopPropagation();
});​

所以这就是我会做的，除非 iOS 有一些特殊的元标记来禁用页面滑动:

$('#main-panel').on('touchmove', function(e) {
    if (!$('#scrolling-panel')[0].contains(e.target)) {
        e.preventDefault();
    }
});