jQuery实现点击页面除指定div外区域触发事件的方法

这问题我之前也碰到过，核心是利用事件冒泡的特性来区分点击区域，给你两种靠谱的解决方案：

方法一：阻止指定元素的事件冒泡 #

点击指定div时，先执行你的特殊函数，再阻止事件向上冒泡到document，这样就不会触发document的click事件了。

// 给指定div绑定点击事件，执行你的特殊逻辑
$('#target-div').click(function(event) {
  // 这里写你的特殊函数代码，比如向输入框添加文本的逻辑
  console.log("执行特殊函数：向输入框添加文本");
  
  // 阻止事件向上冒泡，避免触发document的click
  event.stopPropagation();
});

// 页面其他区域点击时触发alert
$(document).click(function() {
  alert("点击了页面非指定区域");
});

方法二：在document点击事件中判断目标元素 #

如果不想阻止事件冒泡（避免影响其他全局事件），可以在document的click事件里检查点击的目标是否属于指定div的范围，只有不属于时才执行alert。

// 页面点击事件：仅当点击区域不是指定div及其子元素时触发alert
$(document).click(function(event) {
  // closest()方法检查点击目标是否是指定div或它的后代元素
  if (!$(event.target).closest('#target-div').length) {
    alert("点击了页面非指定区域");
  }
});

// 指定div的点击事件，执行特殊函数
$('#target-div').click(function() {
  // 这里写你的特殊函数逻辑
  console.log("执行特殊函数：向输入框添加文本");
});

注意事项 #

• 把代码里的#target-div替换成你实际需要排除的元素选择器（比如类名.special-content或者元素标签）
• 如果指定div里还有子元素，方法二的closest()会自动识别子元素的点击，确保整个div范围都被排除

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