考虑两个带有“点击”事件处理程序的嵌套 div:
var parent = document.getElementById("parent");
parent.addEventListener("click", function() {
console.log("parent click");
});
var child = document.getElementById("child");
child.addEventListener("click", function() {
console.log("child click");
});<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="parent" style="width:150px;height:100px;border: 1px solid black">
<div id="child" style="width:75px;height:50px;border: 1px solid black"></div>
</div>
</body>
</html> 当点击嵌套元素时，“click”事件“冒泡”，因此控制台中的输出如下所示:
child click
parent click
现在考虑涉及 Hammerjs 的类似示例:
var parent = document.getElementById("parent");
var hammer1 = new Hammer(parent).on("tap", function() {
console.log("parent click");
});
var child = document.getElementById("child");
var hammer2 = new Hammer(child).on("tap", function() {
console.log("child click");
});<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
</head>
<body>
<div id="parent" style="width:150px;height:100px;border: 1px solid black">
<div id="child" style="width:75px;height:50px;border: 1px solid black">
</div>
</div>
</body>
</html>当点击嵌套元素时，控制台输出是相反的(先处理父事件):
parent click
child click
要获得“冒泡”事件顺序，必须在父事件处理程序之前注册子事件处理程序。
有没有办法在不打乱事件处理程序注册顺序的情况下达到同样的效果？
最佳答案
使用 jQuery，这是我成功使用的一个技巧:
通常你会做这样的事情:
$("some_selector").hammer().on('press', handlePress);
但是为了获得 Hammer 事件的正确顺序，这是可行的:
$($("some_selector").get().reverse()).hammer().on('press', handlePress);
这只是让 jQuery 以相反的顺序分配事件的技巧(从叶子 child 向上树到 parent 和 parent parent 等)
关于nested - 嵌套元素的 Hammerjs 事件顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37688640/