原生js监听当前元素之外的点击事件

news2024/11/19 14:35:11

监听当前元素之外的点击事件

一、具体场景
二、具体实现
三、完整代码

一、具体场景

当我们需要实现点击其他位置关闭弹窗的时候，就需要监听当前元素之外的点击事件。

二、具体实现

实现思路：监听整个dom的点击事件，判断当前元素是否包含点击事件的触发元素即可。
核心代码：

 const current = document.getElementById('current') // 当前元素
 document.addEventListener('click', (e) => {
    console.log(current.contains(e.target)) // 判断当前元素是否包含触发点击事件的元素，如果当前元素有多个，用 || 来判断即可
  })

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .box {
          width: 100px;
          height: 80px;
          border: 1px solid #000;
      }

      .current {
          width: 100%;
          height: 60px;
          background: #9A6AFF;
      }

      .child {
          width: 100%;
          height: 40px;
          background: #46E3B7;
      }
  </style>
</head>
<body>
<div class="box">
  <div id="current" class="current" onclick="currentClick()">
    current
    <div class="child" onclick="childClick()">child</div>
  </div>
</div>
<script>
  const current = document.getElementById('current')
  function currentClick() {
    console.log('current-click')
  }

  function childClick() {
    console.log('child-click')
  }

  document.addEventListener('click', (e) => {
    console.log(current.contains(e.target))
  })
</script>
</body>
</html>