Question

我尝试在委托事件中使用:not()选择器，例如

 $('#sidebar-nav').on('click', 'a.documents:not(span)', function(e){

 // code

 });

但它不起作用。那么如何编写委托点击事件以选择链接而不是其中的<span>元素？必须委派事件，因为所有链接都是动态添加的。

感谢任何提示。

Answer 1

它没有按预期工作，因为选择器a.documents:not(span)将选择类别为.documents且不 span元素的锚元素（这意味着没有任何元素会被否定，因为没有任何锚元素是span元素。）

换句话说，:not()伪类没有抑制事件被触发，它只是否定了span元素被选中的锚元素（这意味着它不是＆＃ 39;什么都不做。）

您可以检查event.target是否等于event.currentTarget，以确定是否点击了锚元素（而不是其他后代元素）：

$('#sidebar-nav').on('click', 'a.documents', function(event) {
  if (event.target === event.currentTarget) {
    console.log('event.target is the anchor element and not the span.')
  }
});

其中event.currentTarget引用事件侦听器当前附加到的元素（这是锚元素）;和event.target引用触发click事件的元素。

或者，另一个选项是停止后代span元素上的事件传播，以防止点击事件被触发：

$('#sidebar-nav').on('click', 'a.documents', function(event) {
  console.log('Clicked the anchor, not the span.')
});
$('#sidebar-nav').on('click', 'a.documents span', function(event) {
  event.stopPropagation();
});

我建议选择第一个选项，因为它绝对更清洁。

jquery：在委托事件中的not（）选择器

1 个答案: