我正在尝试设置一个事件,当点击任何没有.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") ); });
这也不起作用:
$("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的解决方案.