gpt4 book ai didi

javascript - 如何使用 hammer.js 2 获得正确的事件传播?

转载 作者:搜寻专家 更新时间:2023-11-01 04:24:54 24 4
gpt4 key购买 nike

我在使用 Hammer.js 2.0.4 的情况下有两个 hammerjs 实例来监听 tap 事件:在父 div 元素中打开,一个在子元素中。我想在 child 处理时停止事件传播。但是,hammer.js 2 不支持。

在下面的示例中,我希望子项的 tap 事件首先触发,然后是父项的事件(事件从子项冒泡到父项)。相反,它看起来像 hammer.js 的 第一个创建的实例tap 事件首先触发。

试试下面的例子(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>

关于如何在 hammer.js 中进行正确的事件传播有什么想法吗?

最佳答案

我在 hammer.js v2 之上创建了一个小库来解决传播问题:

https://github.com/josdejong/propagating-hammerjs

不过,如果 hammer.js 开箱即用地支持这一点,那就太好了。

关于javascript - 如何使用 hammer.js 2 获得正确的事件传播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27428185/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com