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

发布时间：2024年01月16日

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

一、具体场景

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

二、具体实现

实现思路：监听整个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>

即使点击子元素，也能被我们判断到。
在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_43845090/article/details/135629550
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章