Question

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

在下面的示例中，我希望孩子的tap事件首先触发，然后触发父事件的事件（事件从子节点冒泡到父节点）。相反，看起来Ham.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中使用正确的事件传播？

Answer 1

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

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

但是，如果hammer.js开箱即用，那就太棒了。

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

1 个答案: