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

【问题标题】：How to get proper event propagation with hammer.js 2?如何使用hammer.js 2 获得正确的事件传播？
【发布时间】：2014-12-11 16:51:06
【问题描述】：

我正在使用 Hammer.js 2.0.4 的情况下，我有两个hammerjs 实例来监听tap 事件：在父 div 元素中，一个在子元素中。我想在孩子处理时停止事件传播。但是，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中获得正确的事件传播？

【问题讨论】：

标签： javascript touch hammer.js event-propagation

【解决方案1】：

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

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

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

【讨论】：