如何让event.target覆盖div及其子元素？检测非该区域点击（无jQuery）

嘿，你不用再挨个列子元素或者给所有子元素加类啦！原生JS里有个超好用的方法Element.contains()，能完美解决你的两个需求，代码简洁到爆炸：

核心实现思路 #

Element.contains()方法可以检测一个元素是否是另一个元素的后代元素（包括元素本身），刚好能帮我们判断点击的位置是否在目标div及其子元素范围内。

完整代码示例 #

// 先获取你的目标div（替换成实际的选择器，比如id/class选择器）
const targetContainer = document.getElementById('your-target-div-id');

window.addEventListener('mouseup', function(event) {
  // 检查点击的元素是否不在目标容器及其子元素内
  // 加个targetContainer的判断，避免元素不存在时报错
  if (targetContainer && !targetContainer.contains(event.target)) {
    closeWindow();
  }
});

为什么这个方法更好？ #

• 无需手动维护子元素列表：不管子元素新增、删除，代码都不用改
• 不用额外加类：避免污染DOM结构
• 代码量极少，逻辑清晰，原生JS支持所有现代浏览器（包括IE9及以上）

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