1

我在很多 JS 脚本中使用事件委托。通常，我会做的是我将拥有一个全局事件处理程序，并且我会追踪到接收事件的元素。问题是我在安装事件时不能总是使用 jQuery 的过滤选择器。例如，如果您正在使用它：

$('.todo').on('click', function(e) {
  // The event target is guaranteed to be something having the
  // class .todo
  var todo = e.target;
});

然后就很简单了

但是，我现在在 Backbone 中使用视图事件委托，我可以在那里安装一个事件处理程序：

 'click .todo' : 'someHandlerFunction'

问题出在那个处理函数中，我不能保证在右边接收到事件目标，但我可以得到它的后代之一。也就是说，我正在获取事件对象，但由于冒泡，它的目标也可以是具有“.todo”类的东西内部的一个元素。

理想情况下，我希望有一个简单的功能可以做到这一点：

 $(document.body).on('click', function(evt) {
   var interestingElementOrNull = jQuery(evt.target).parentOrSelf('.todo');
 });

但我必须首先hasClass()对事件目标执行 a ，然后（如果不匹配）执行parent()调用。

有没有更好/标准的方法来做到这一点？

4

2 回答 2

0

如果您不想每次都手动检查事件目标，您可以编写自己的插件： 

$.fn.parentOrSelf = function(selector){
    return this.is(selector) ? this : this.closest(selector);
}
于 2013-03-19T19:37:20.800 回答
0

正如wirey所说，如果你想要ancestorOrSelf()而不是parentOrSelf()，你只需要使用closest()：

var element = jQuery(evt.target).closest(".todo");

如果你真的想要parentOrSelf()，你可以将parent()链接到addBack() *并将filter()应用于结果：

var element = jQuery(evt.target).parent().addBack().filter(".todo");

但是请注意，在这两种情况下，element它将是一个空的 jQuery 对象，而不是null没有匹配的对象。如果要确定某些内容是否匹配，可以测试其长度属性。

*在 jQuery 1.8 之前addBack()被命名为andSelf() 。

于 2013-03-19T19:37:34.937 回答