Jos*_*ong 5 javascript touch event-propagation hammer.js
我正在使用Hammer.js 2.0.4,我有两个hammerjs实例来监听tap事件:在父div元素中,在子元素中有一个.我希望在孩子处理时停止事件传播.但是,hammer.js 2不支持.
在下面的示例中,我希望tap子事件的事件首先触发,然后触发父事件的事件(事件从子节点冒泡到父节点).相反,它看起来像第一个创建的hammer.js 实例的tap事件首先触发.
尝试以下示例(也在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>
任何想法如何在hammer.js中使用正确的事件传播？
我在hammer.js v2 之上创建了一个小库来解决传播问题：
https://github.com/josdejong/propagating-hammerjs
不过，如果hammer.js 能够开箱即用地支持这一点，那就太好了。