javascript - 为什么 jQuery :not selector attribute doesn't work for this scenario?

Question

我有以下按预期工作的代码:

第一种方法

$('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 元素的一部分。

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

Answer 1

这是因为 ul :not(li) 将选择 ul 的所有后代，但不是 li 元素。

由于您的 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>