Question

如何在Hammer.js中使用纯JavaScript进行jQuery样式的事件委派？ E.g：

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

这是直接可行还是我必须自己做代理？

Answer 1

我使用以下函数来测试目标是否是委托。

function _getDelegate(selector, target, currentTarget) {

   var delegate = null;

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

   return delegate;

}

我正在使用jquery过滤器，因为我经常使用它和一些更复杂的选择器。

用法：

var delegationSelector = ".child";
$element.hammer()
$element.on("tap", function handler(event){
   var delegate = _getDelegate(delegationSelector, event.target, event.currentTarget);
   if(delegate){ // or if(!delegate) return;
      // Your handler code
   }
});

这不适用于所有选择器，但我认为它比André更好，因为如果你的“目标”具有子元素，它仍然可以工作。 E.g。

<div id="parent">
    <div class="child">
        <div class="text">Test</div>
    </div>
</div>

André将在这里失败，因为target是[div.text]并且没有你的班级。

对于_getDelegate的上述用法，让我们说$element = $("#parent")。如果您点击“测试”一词event.target将是[div.text]（您点按的位置），event.currentTarget将是[div.parent]（处理程序已注册的位置）。当您使用这些参数调用_getDelegate时，您将收到[div.child]并知道您应该运行处理程序代码。

对于一个纯粹的JS版本，你需要这样的东西，你可以通过父母循环查看你是否有任何东西。

var delegate;
var target = e.target; // e.g. Inner div
var currentTarget = e.currentTarget // e.g. #parent

while(target && target != currentTarget){
   if(target.className.indexOf('child')!=-1){
      delegate = target;
      break;
   }
   target = target.parentNode;
}

if( delegate ) {
   console.log('delegated tap received');
}

这仍有很多瑕疵。 className的整个索引是一个坏主意，因为类可以是彼此的子字符串，例如“myClass”和“myClass2”。此外，我的代码假设您的所有子元素都位于其父元素中。

Answer 2

受到Jools回答的启发，这就是我想出的。我没有使用纯JS解决方案 - 事实上，这适用于Backbone.View，但很容易适应其他情况。

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

要在非Backbone环境中使用，只需将对limit / contains元素的引用作为第3个参数传递（如Jools的解决方案中所示），并使用它来替换{{1}}。

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));。）

Answer 3

您只需要检查传递给处理程序的Event对象的target。

Here's a demo

Answer 4

继续@ Lambarr的解决方案 - Typescript：

private delegateBind(rootElement:Node,e, selector:string, handler: (target:any) => any)
  {

    let target=e.target;
    let o = {

      getEventDelegate: function ()
      {
        var delegate;

        while (target && target != rootElement)
        {
          delegate = jQuery(target).filter(selector)[0];
          if (delegate)
          {
            return delegate;
          }

          target = target.parentNode;
        }
        return undefined;
      }

    };

     target = o.getEventDelegate();
    if (target)
    {
      handler(target);
    }
  }

用法：

private registerDocumentclick()
  {

     Hammer(this.document).on('tap', e =>
        this.delegateBind(this.document,e,'.article', (elm) => console.log(elm.classList))

    );
  }

与Hammer.js的事件代表团

4 个答案: