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

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演示)

这也不起作用:

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

两个输出: Something without class 'four' was clicked that had class: four

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

Answer 1

你的代码:

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

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

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

1. 触发click事件的原始元素显然是.four元素.jQuery检查该元素是否与":not(.four)"选择器匹配.由于它没有,因此不会在该元素上调用处理程序.

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

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