使用嵌套 div 的滑动事件传播不起作用答案

【问题标题】：Swipe event propagation with nested div doesn't work使用嵌套 div 的滑动事件传播不起作用
【发布时间】：2017-03-29 15:40:47
【问题描述】：

您好，我有以下 html 结构：

<div class="container">

        <div class="scroller">
            <div id ="goldenPage" class="page active">              
                <div class="block text">
                    <div class="rich-text"></div>
                </div>
                <div class="block">
                    <div class="form"></div>
                </div>
                <div class="block">
                    <ul class="menu"></ul>
                </div>
            </div>
            <div id ="cachePage" class="page"></div>
        </div>

    </div>

如果我使用代码将 div 上的滑动事件与类容器绑定

var myElement = $(".container")[0];
            var hammertime = new Hammer(myElement);             
            hammertime.on("swiperight",function(){
                console.debug(" manage swiperight event.");                 
                });

如果我滑动没有任何反应（除非我在页面底部滑动，因为带有滚动器类的内部 div 的高度低于父 div）。如果我将 div 上的滑动与类滚动器绑定，则滑动被正确绑定。滚动 div 与 jquery scrollpane 插件绑定。有什么想法吗？！

【问题讨论】：

那么这里的问题到底是什么？您是在问为什么它正在做它正在做的事情，还是在寻求一种将滑动绑定到容器 div 并且仍然可以正常工作的方法？

标签： javascript jquery hammer.js

【解决方案1】：

DEMO — 确保您的 JavaScript/jQuery 在document.ready 事件之后被触发。

如果 JavaScript 在 DOM 中的元素可用之前触发，您的 JavaScript 将找不到该元素，因此无法将 (swiperight) 事件绑定到该元素。

使用 jQuery，这可以通过将你的 JavaScript 代码包装在：

$(function() {
    // Your code here.
    console.log("Ready!");
});

【讨论】：