I'm using Hammer.js 2.0.4 in a situation where I have two hammerjs instances to listen for tap events: on in a parent div element, and one in a child. I would like to stop event propagation when handled by the child. However, hammer.js 2 does not support that.
In the following example, I would expect that the tap event of the child fires first, and then that of the parent (event bubbling from child to parent). Instead, it looks like the tap event of the first created instance of hammer.js fires first.
Try the following example (also on jsbin):
<!DOCTYPE html>
<html>
<head>
<script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script>
<style>
#child {
width: 200px;
height: 200px;
background: lightgreen;
}
</style>
</head>
<body>
<p>
See the browser console. Why does the tap event of the parent div fire first?
</p>
<div id="parent">
<div id="child">click here</div>
</div>
<script>
var hammerParent = new Hammer(document.getElementById('parent'));
var hammerChild = new Hammer(document.getElementById('child'));
hammerParent.on('tap', function (event) {
console.log('tap parent');
});
hammerChild.on('tap', function (event) {
console.log('tap child');
});
</script>
</body>
</html>
Any ideas how to get a proper event propagation working in hammer.js?
I created a little library on top of hammer.js v2 to resolve the propagating issue:
https://github.com/josdejong/propagating-hammerjs
Still, it would be great if hammer.js would support this right out of the box.