为什么jQuery:not选择器属性没有'不适用于这种情况

Why jQuery :not selector attribute doesn't work for this scenario?

本文关键字：不适用 适用于 情况 jQuery not 选择器 属性 为什么      更新时间：2023-09-26

我有以下代码，可以按预期工作：

第一种方法

$('ul').on('click', function(e) {
   $(this).append('<li>foo</li>');
})
.on('click', 'li', function(e) {
   e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
它的作用很简单：

  • 它在单击任何项目符号时添加一个li元素
  • 忽略li元素内部的任何单击

我很冷静，这是我想要的行为。使用这种方法，项目符号点似乎不是li元素的一部分，因为对项目符号点执行的任何单击都不会通过第二个函数。

我的问题出现了，因为我认为我可以对javascript代码进行一点重构，并在第一次调用中将"：not（li）"选择器作为参数传递给它。

第二种方法：

$('ul').on('click', ":not(li)", function(e) {
    $(this).append('<li>foo</li>');
});

但事实证明，它的行为是不同的，我不明白为什么不在点击要点后添加li元素。

第二种方法看起来更干净，但与我们在第一种方法中看到的相反，就像子弹点是li元素的一部分。

-为什么第二种方法表现不同？

这是因为ul :not(li)将选择不是li元素的ul的任何后代。

由于ul元素只包含li元素，因此事件永远不会被激发。但是，如果li元素包含span元素，则在单击span元素时会触发事件，但这不是所需的结果。

与其在单击li元素时抑制事件，我只建议检查this是否等于e.target。这与您的第一个示例类似。

$('ul').on('click', function(e) {
  if (this === e.target) {
    $(this).append('<li>foo</li>');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

相关文章：