5

我在有两个hammerjs实例来监听tap事件的情况下使用Hammer.js 2.0.4：在一个父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中获得正确的事件传播？

4

1 回答 1

3

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

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

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

于 2015-03-23T08:15:58.720 回答