JavaScript 检测点击外部元素

在 Web 开发中，我们经常会需要检测用户是否点击了某个元素以外的区域，例如点击弹出的下拉菜单外部时需要关闭下拉菜单。本文将介绍如何使用 JavaScript 检测点击外部元素。

方法一：使用 event.target

可以通过绑定 document 对象的 click 事件来监听用户的点击操作，然后判断点击的元素是否在需要检测的区域内。

const container = document.querySelector('.container')
const dropdown = document.querySelector('.dropdown')

document.addEventListener('click', event => {
  if (!container.contains(event.target) && !dropdown.contains(event.target)) {
    // 用户点击了 container 和 dropdown 以外的元素，执行操作
  }
})

在上面的代码中，我们首先获取了需要检测的区域的 DOM 元素 container 和 dropdown，并绑定了 document 的 click 事件。

在事件处理函数中，我们使用了 event.target 获取用户点击的元素。然后判断这个元素是否在 container 或 dropdown 内部，如果不是则执行相应操作。

需要注意的是，如果 container 或 dropdown 中存在嵌套的子元素，也需要将子元素包含在内。可以使用 contains 方法来判断元素是否被包含在另一个元素内部。

方法二：使用事件委托

如果需要检测的元素较多，可以使用事件委托的方式，将事件绑定在容器元素上，然后在事件处理函数中判断点击的元素是否在需要检测的区域内。

<div class="container" id="container">
  <div class="dropdown"></div>
  <div class="menu"></div>
  <div class="button"></div>
</div>

const container = document.querySelector('#container')

container.addEventListener('click', event => {
  const dropdown = document.querySelector('.dropdown')
  const menu = document.querySelector('.menu')
  const button = document.querySelector('.button')

  if (!dropdown.contains(event.target) &&
      !menu.contains(event.target) &&
      !button.contains(event.target)) {
    // 用户点击了 container 以外的元素，执行操作
  }
})

在上面的代码中，我们将 click 事件绑定在 container 元素上。然后在事件处理函数中，通过查询需要检测的元素是否包含点击的元素来判断是否在需要检测的区域内。

总结

本文介绍了两种方式来检测用户点击外部元素的操作。第一种方式使用 event.target 对象来判断点击的元素是否在需要检测的区域内；第二种方式使用事件委托的方式将事件绑定在容器元素上，并在事件处理函数中判断点击的元素是否在需要检测的区域内。