Question

我在很多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()，然后（如果不匹配）执行parent()调用。

有更好/标准的方法吗？

Answer 1

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

$.fn.parentOrSelf = function(selector){
    return this.is(selector) ? this : this.closest(selector);
}

Answer 2

正如有线说的那样，如果你想要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。如果要确定某些内容是否匹配，可以测试其length属性。

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