阻止孩子在hammer.js中触发父事件答案

【问题标题】：Stop child from triggering parent event in hammer.js阻止孩子在hammer.js中触发父事件
【发布时间】：2014-12-20 14:02:08
【问题描述】：

将锤子事件绑定到元素时，该事件也由其子元素触发。使用stopPropagation 来防止事件冒泡似乎不起作用。

HTML：

<div id="parent">
    <div id="child"></div>
</div>

JS：

var hammertime = new Hammer(document.getElementById('parent'));

hammertime.on('tap', function(e) {
    e.srcEvent.stopPropagation();
    alert('Clicked on ' + e.target.id);
});

参见 JSFiddle 例如：http://jsfiddle.net/qqvyqzgh/3/

我在这里错过了什么？

【问题讨论】：

标签： javascript dom-events hammer.js

【解决方案1】：

您可以检查事件的目标是否是父元素。

var element = document.getElementById('parent');
var hammertime = new Hammer(element);

hammertime.on('tap', function (e) {
    if(e.target === element) {
        alert('Clicked on ' + e.target.id);
    }
});

这里是your updated fiddle。

【讨论】：

嗨@guglie，你的回答帮助我找到了正确的方向。但是我有一个包含很多子元素的父容器。并且其中一个子元素具有不同的事件。如果您有不同的目标值，您将如何管理？谢谢
嗨@Mesmerize86，如果需要对点击做出反应的孩子只是一个可能你可以简单地放另一个子句} else if (e.target === child_element) { /*do stuff for child*/ }

【解决方案2】：

添加到@Guglie 的答案，对于更一般的情况，为要禁用锤子事件的子元素中的所有元素添加一个类：

<div>
  Drag me
  <input class='disableHammer' type="range" placeholder="Don't drag me"></input>
</div>

和;

hammertime.on('pan', function(e) {
  if(e.target.classList.contains("disableHammer")) alert('Stop dragging him.');
})

【讨论】：