检测元素外部的点击 JavaScript

在前端开发中，我们经常需要检测用户在页面上的点击行为，但是有时候我们也需要检测到用户在元素外部的点击行为。本文将介绍如何使用 JavaScript 来检测元素外部的点击，并提供相关代码供参考。

实现方式

实现检测元素外部的点击的方式有很多种，以下是其中两种方式。

方式一：事件委托

事件委托是一种常用的方式，它可以利用事件冒泡的原理来实现检测元素外部的点击。具体实现方式为：将事件绑定到元素的祖先元素上，当事件冒泡到这个祖先元素时，检查事件的目标元素是否是需要被检测的元素或者它的子元素，如果不是，则说明用户在元素外部进行了点击。

以下是代码示例：

const parentElement = document.querySelector('.parent-element');
const targetElement = document.querySelector('.target-element');

parentElement.addEventListener('click', function(event) {
  if (!targetElement.contains(event.target)) {
    // 用户在目标元素外部进行了点击
  }
});

上述代码中，我们将点击事件绑定到祖先元素 parentElement 上，当事件冒泡到 parentElement 时，我们通过 event.target 获取当前被点击的元素，然后判断该元素是否是目标元素 targetElement 或其子元素，如果不是，则说明用户在目标元素外部进行了点击。

方式二：全局事件监听

另一种实现方式是通过全局事件监听来检测用户在元素外部的点击。具体实现方式为：在页面中监听 click 事件，并记录最后一次点击所在的元素，当下一次点击发生时，判断该元素是否是需要被检测的元素或者它的子元素，如果不是，则说明用户在元素外部进行了点击。

以下是代码示例：

let lastClickTarget = null;
document.addEventListener('click', function(event) {
  lastClickTarget = event.target;
});

function isOutsideClick(targetElement) {
  return !targetElement.contains(lastClickTarget);
}

const targetElement = document.querySelector('.target-element');
if (isOutsideClick(targetElement)) {
  // 用户在目标元素外部进行了点击
}

上述代码中，我们通过全局事件监听来记录最后一次点击所在的元素 lastClickTarget，然后定义了一个 isOutsideClick 函数用来判断下一次点击是否在目标元素 targetElement 的外部。如果函数返回 true，则说明用户在目标元素外部进行了点击。

总结

本文介绍了如何使用 JavaScript 来检测元素外部的点击。我们可以通过事件委托或全局事件监听来实现这一功能，具体实现方式根据不同场景选择。