javascript - 为什么不是jQuery :not() selector working as I expect it to?

我试图设置一个事件，当单击任何不使用.four类的事件时将触发该事件。但是，即使我使用的是.four，单击e.stopPropagation()类的内容时也会触发。

$("html").one("click", ":not(.four)", function(e){
   e.stopPropagation();
   console.log("Something without class 'four' was clicked that had class: " + $(e.srcElement).attr("class") );
});

(jsFiddle Demo)

这也不起作用:

$("html").not('.four').on("click", function(e){

两者输出:Something without class 'four' was clicked that had class: four
我在使用:not()时遇到了很多麻烦，我怀疑这可能与现在支持CSS3 :not()的浏览器有关，但是我仍然无法理解这个简单的问题。

最佳答案

您的代码:

$("html").one("click", ":not(.four)", function(e){
    e.stopPropagation();
    // other code
});

为点击事件类型设置全局事件委托(delegate)。这意味着，只要在上触发了点击事件，页面上的任何元素，jQuery都会检查该元素是否与提供的选择器":not(.four)"相匹配，如果匹配，jQuery就会在该元素上调用处理程序。

当您单击.four元素时，将发生以下情况:

触发click事件的原始元素显然是.four元素。 jQuery检查该元素是否与":not(.four)"选择器匹配。既然没有，处理程序就不会在该元素上调用而不是。

单击事件使DOM树冒泡。由于尚未取消此click事件的传播，因此该事件将在下一个元素处触发，该元素是原始元素的父元素-演示中的.two元素。再次，jQuery检查元素是否与选择器匹配。既然如此，则在该元素上调用处理程序。

如您所见，即使您单击.four元素，也会调用您的处理程序。为了防止单击.four元素时执行代码，您必须在处理程序中进行显式检查-基本上是Jason解决方案的作用。

关于javascript - 为什么不是jQuery :not() selector working as I expect it to?，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14107212/