停止子事件触发hammer.js中的父事件

Question

当将锤子事件绑定到元素时，该事件也由其子元素触发。使用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);
});

例如：http://jsfiddle.net/qqvyqzgh/3/，请参阅JSFiddle

这里我漏掉了什么？

Answer 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。

Answer 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.');
})