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

Question

我正在尝试设置一个事件，该事件在单击没有 .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){

两个输出:单击没有类别“四”但类别为:四的东西

我在使用 :not() 时遇到了很多麻烦，我怀疑其中很多问题可能与我现在支持 CSS3 :not() 的浏览器有关，但我仍然无法理解这个简单的问题。

Answer 1

您的代码:

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

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

这是当您单击 .four 元素时发生的情况:

1. 触发点击事件的原始元素显然是.four元素。 jQuery 检查该元素是否匹配 ":not(.four)" 选择器。因为它没有，所以处理程序不会在该元素上被调用。

2. 点击事件在 DOM 树中冒泡。由于此点击事件的传播尚未取消，该事件会在下一个元素处触发，该元素是原始元素的父元素 - 您的演示中的 .two 元素。同样，jQuery 检查元素是否匹配选择器。既然如此，就会在该元素上调用处理程序。

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