為什么 jQuery :not selector 屬性不適用於這種情況？

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)將選擇不是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>