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

Question

When binding an hammer event to a element, the event is also triggered by it's child element. Using stopPropagation to keep the event from bubbling up doesn't seem to work.

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);
});

See JSFiddle for example: http://jsfiddle.net/qqvyqzgh/3/

What am I missing here?

Answer 1

You can check if the target of the event is the parent element.

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);
    }
});

Here's your updated fiddle .

Answer 2

Adding to @Guglie's answer, For a more general case, add a class to all elements in children you want to disable the hammer event:

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

and;

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