如何检测 div 外部的点击 - Javascript

在开发 Web 项目中，有时需要在 div 外部检测用户的点击事件，比如在点击 div 外部时隐藏一个弹出框或者关闭一个菜单等等。

在 Javascript 中，可以通过以下两种方法来实现对 div 外部点击事件的监测。

1. 使用 Event.target

Event.target 属性返回触发事件的元素，可以通过判断 Event.target 是否在 div 之内来判断点击事件是否在 div 外部。具体代码如下：

document.addEventListener("click", function(event) {
  var div = document.getElementById("myDiv");
  if (!div.contains(event.target)) {
    // 点击了 div 外部
  }
});

上面的代码监听整个文档的点击事件，如果点击事件触发的元素不在指定的 div 内，则说明点击 div 外部。

2. 使用冒泡事件

事件冒泡是指事件在 DOM 树中向上传递的过程。当一个元素触发事件时，事件会一直向上传递至文档根节点。可以利用事件冒泡机制，在点击 div 时阻止事件冒泡并记录下来，然后在文档上添加一个全局的 click 事件，判断这个事件是否由 div 触发，并且阻止事件冒泡。具体代码如下：

var div = document.getElementById("myDiv");
div.addEventListener("click", function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  // 记录点击事件
});
document.addEventListener("click", function(event) {
  if (!div.contains(event.target)) {
    // 点击了 div 外部
  }
});

上面的代码首先监听指定的 div 的点击事件，当 div 被点击时，会阻止事件冒泡并记录下来；然后在整个文档上监听一个 click 事件，当事件被触发时，判断是否由 div 触发，并且阻止事件冒泡，从而达到判断点击 div 外部的目的。

以上两种方法可以根据具体需求选择使用，其中第一种方法比较简单，适用于对性能要求不高的场景；第二种方法稍微复杂一些，但是可以提高性能，适用于对性能要求较高的场景。