logo标签列表

嵌套元素中的Hammerjs事件顺序

nestedevent-handlingdom-eventshammer.js
3
考虑两个嵌套的 div，带有“click”事件处理程序： 

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”事件会“冒泡”，因此控制台输出如下：

子元素点击

父元素点击

现在考虑涉及 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>

当单击嵌套元素时，控制台输出的结果相反（先处理父级事件）：

父级点击

子级点击

为了获得“冒泡”事件顺序，必须在父级事件处理程序之前注册子级事件处理程序。
有没有办法在不混乱事件处理程序注册顺序的情况下实现相同的效果？
你最终解决了吗？ - Benny Bottema
不幸的是，我以相反的顺序注册事件处理程序。 - eugenesqr
2个回答
1

我研究了这个问题，因为我遇到了同样的问题。

要理解问题，您需要知道hammerjs如何识别手势（由几个事件组成），在这种情况下是“tap”手势。

Hammer安装所谓的识别器，当某些事件travel（冒泡）沿着DOM时会激活它们。

当“pointerup”事件冒泡到window时，将触发“tap”事件。 当“pointerup”事件到达window（event.currentTarget是window）时，所有已注册的识别器都会在该节点的事件上激活，按照安装顺序进行。

为了尊重传播线路，“tap”识别器必须在它们各自元素的“pointerup”事件上触发，而不是在window上触发。

希望这是一个相对连贯的解释。

1
使用jQuery，这是我成功使用的一个技巧：
通常情况下，您会执行以下操作：
$("some_selector").hammer().on('press', handlePress);

然而，为了正确处理 Hammer 事件的顺序，可以采用以下方式：

$($("some_selector").get().reverse()).hammer().on('press', handlePress);

这只是一个技巧，让jQuery按相反的顺序（从叶子节点向上遍历树形结构，直到达到父级和祖先级别）分配事件。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接