jquery :not() selector inside delegated event

Question

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

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

 // code

 });

但它不起作用。那么如何编写委托(delegate)单击事件以便选择链接而不是 <span>里面的元素？该事件必须被委托(delegate)，因为所有链接都是动态添加的。

感谢您的任何提示。

Answer 1

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

换句话说，:not() 伪类不会抑制事件的触发，它只是否定 span 元素的 anchor 元素被选择(这意味着它根本没有做任何事情)。

您可以检查 event.target 是否等于 event.currentTarget 以确定 anchor 元素是否被单击(而不是其他后代元素):

$('#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 引用事件监听器当前附加到的元素(即 anchor 元素)； event.target 引用触发点击事件的元素。

<小时/>

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

$('#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();
});

我建议使用第一个选项，因为它绝对更干净。