javascript - 使用 Hammer.js 的事件委托(delegate)

Question

我如何在 Hammer.js 中使用纯 JavaScript 执行 jQuery 样式的事件委托(delegate)？例如:

Hammer(document).on('tap', '.item', function () {
  console.log('tapped')
})

这是直接可行的还是我必须自己进行授权？

Answer 1

受 Jools 回答的启发，这就是我的想法。我没有考虑纯 JS 解决方案——事实上，这是为与 Backbone.View 一起使用而设计的，但很容易适应其他情况。

当它到达 View 的根元素(this.el)时，它将停止攀登节点树。从 HammerJS 事件标识的目标开始，它将寻找与指定选择器匹配的第一个元素，如果没有找到该元素，则返回 undefined。

要在非 Backbone 环境中使用，只需将对限制/包含元素的引用作为第三个参数传递(如在 Jools 的解决方案中)并使用它来替换 this.el。

/**
 * @param {Node}target - the target of the received event
 * @param {String}selector - any jQuery-compatible selector
 */
getEventDelegate: function (target, selector) {
     var delegate;
     while (target && target != this.el) {
        delegate = $(target).filter(selector)[0];
        if (delegate) {
           return delegate;
        }
        target = target.parentNode;
     }
     return undefined;
  }

如果你有一个 onTap 回调函数，它可能看起来像这样:

/**
 * @param {Event}ev
 */
onTap: function (ev) {
   var target = this.getEventDelegate(ev.target, "#desiredTarget");
   if (target) {
      // TODO something with the target...
   }
}

要将它们全部连接起来，您需要这样的东西...

this._hammer = new Hammer(this.el);
this._hammer.on('tap', _.bind(this.onTap, this));

(不要忘记在 View 被销毁时调用 this._hammer.destroy()!)