您如何在hammer.js 2.0 版中委托事件？答案

【问题标题】：How do you delegate events in hammer.js version 2.0?您如何在hammer.js 2.0 版中委托事件？
【发布时间】：2014-09-17 20:12:36
【问题描述】：

在hammer.js v1.x（带有jquery插件）中，您可以像这样委托事件：

$('ul').hammer().on("touch", "li", callback);

使用此语法，您可以将事件侦听器附加到 ul 而不是您想要侦听的单个 li 元素。这将允许您将li 元素动态添加到ul，而无需重新附加事件侦听器。

但是我不知道如何在 Hammer v2.0 中做到这一点。（我已根据新语法将 touch 更改为 tap）。

【问题讨论】：

我不确定是否有更简洁的方法，但是您可以肯定地检查回调中的事件对象并将目标tagName 与li 进行比较，然后执行它。

标签： jquery hammer.js

【解决方案1】：

为了提高速度，锤子现在默认触发配对事件。但是，您可以通过打开 domEvents 设置重新启用事件委托，如下所示：

$('ul').hammer({domEvents:true}).on("tap", "li", callback);

【讨论】：

【解决方案2】：

我问了一个类似的问题，没有答案 (Long press (hold) with jquery hammer.js 2 and event delegation)。

我最终检查了事件目标。这有点烦人，因为这意味着您不能使用一些更高级的选择器进行额外的工作，但是如果您从目标运行到您的根/父级，您应该捕获您想要的。你不能只看 li，如果你把其他元素放在那个 li 里面，那么目标很可能是一个 div。

我使用这个功能：

function _isDelegate(selector, target, currentTarget) {

   var delegate = null;

   while (target && target != currentTarget) {
      delegate = $(target).filter(selector)[0];
      if (delegate) 
         return delegate;
      target = target.parentNode;
   }

   return delegate;

}

selector 是您的委托选择器，例如“礼”。 target 是事件对象中给定的同名元素。如果你摸对了，它应该是 li 或它的一个孩子。 currentTarget 是您实际注册监听器的父/根元素。

如果您没有触摸 li，则返回 null，因此您可以忽略该事件，或者如果您触摸了它或它的内部，它将是 li 元素。

【讨论】：

感谢 Jools，这很有帮助。在发现实际修复非常简单之前，我实际上像这样重写了所有代码。