如何使用jQuery的.not()方法选中body内除指定元素外的所有元素

你当前的写法逻辑存在偏差：$('body').not($('#exclude'))的初始选择结果仅包含body元素本身，#exclude是body的后代元素，并不在这个初始选择集合中，因此.not()过滤没有实际效果，点击事件最终绑定在了body元素上。点击#exclude时，事件会向上冒泡触发body的点击回调，所以始终会打印日志。

提供两种可直接使用的实现方式：

方案1：回调内判断事件触发源 #

该写法兼容性最强，也能覆盖#exclude内部有嵌套子元素的场景，适用范围更广：

$(document).ready(function() {
  $('body').click(function(e) {
    // 点击目标为#exclude或其内部元素时，终止后续逻辑
    if ($(e.target).closest('#exclude').length) return
    console.log('HELLO');
  })
})

方案2：事件委托阶段直接过滤 #

利用jQuery事件委托的选择器参数，在事件触发阶段就排除目标元素：

$(document).ready(function() {
  $('body').on('click', ':not(#exclude)', function() {
    console.log('HELLO');
  })
})

内容的提问来源于stack exchange，提问作者Naga