如何在jQuery的body点击事件中排除class为foo的div？

嗨，我来帮你搞定这个困扰！你原来的代码之所以不管用，核心原因是事件冒泡的机制在搞鬼：

你写的$("body:not(.foo)").click(...)其实是给body元素绑定了点击事件——只要body本身没有foo类就会触发。但当你点击那个带foo类的div时，点击事件会从div向上“冒泡”到它的父元素，最终传到body。这时候body的点击事件还是会执行，因为body本身确实不是foo类呀！

下面给你两种靠谱的解决方案：

方案一：阻止目标元素的事件冒泡 #

给.foo元素绑定点击事件，直接阻止它的事件向上冒泡到body，这样body的点击事件就不会被触发了：

// 阻止.foo的点击事件冒泡
$(".foo").click(function(e) {
    e.stopPropagation();
});

// 给body绑定点击事件
$("body").click(function() {
    alert("clicked body");
});

方案二：在body事件中判断目标元素 #

这种方法不需要额外绑定.foo的事件，直接在body的点击事件里检查触发事件的目标元素是不是.foo或者它的后代，如果是就跳过alert：

$("body").click(function(e) {
    // 用closest()检查目标元素是否属于.foo的层级
    if (!$(e.target).closest(".foo").length) {
        alert("clicked body");
    }
});

这个方法更灵活，哪怕.foo里面还有子元素，点击子元素也不会触发body的alert，而且如果.foo是动态生成的元素，这个方法依然有效。

完整可运行代码示例 #

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div>
    <p>Hello World</p><button>Change color</button>
  </div>
  <br><br><br><br><br><br>
  <div class="foo">FOOOO</div>
</body>

CSS

body { background: #e8e6e4; padding: 20px; font-family: Helvetica;border:2px solid;}
.foo{ color:#ffffff; background:red; padding: 10px;}
button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff;}

JavaScript（用方案二的代码）

$("body").click(function(e) {
    if (!$(e.target).closest(".foo").length) {
        alert("clicked body");
    }
});

内容的提问来源于stack exchange，提问作者Ashik K H