javascript – 为什么jquery：not()选择器不像我期望的那样工作？

我正在尝试设置一个事件,当点击任何没有.four类的事件时触发该事件.但是,即使我正在使用e.stopPropagation(),它也会在点击.four类的内容时触发.

$("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){

两个输出：点击没有类’四’的东西有类：四

我遇到了很多麻烦：不是()而且我怀疑它可能与支持CSS3的浏览器有很大关系：现在没有(),但我仍然无法理解这个简单的问题.

解决方法

你的代码：

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

为click事件类型设置全局事件委派.这意味着每当在页面上的任何元素上触发click事件时,jQuery将检查该元素是否与提供的选择器匹配 – “：not(.four)” – 如果是,则jQuery将调用该元素上的处理程序.

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

>触发click事件的原始元素显然是.four元素. jQuery检查该元素是否与“：not(.four)”选择器匹配.由于它没有,因此不会在该元素上调用处理程序.
>点击事件冒泡DOM树.由于此click事件的传播尚未取消,因此事件将触发下一个元素,即原始元素的父元素 – 演示中的.two元素.同样,jQuery检查元素是否与选择器匹配.既然如此,就会在该元素上调用处理程序.

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