js 中 contains 判断点击事件是否在给定范围内

最新推荐文章于 2024-06-21 14:29:17 发布

小达学徒

最新推荐文章于 2024-06-21 14:29:17 发布

阅读量685

点赞数 2

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_44119268/article/details/129282865

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文档

问题

下拉框组件是如何监听点击下拉框以外的区域，下拉框自动收起呢？

思考

使用蒙版，但是这样会多写一个标签，当其他元素层级高过蒙版时，可能点击不会冒泡到蒙版，要处理冒泡事件等等。
使用元素中的 contains
- contains 返回一个布尔值，表示一个节点是否是给定节点的后代，即该节点本身、其直接子节点（childNodes）、子节点的直接子节点等。
  demo链接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学习 js 的 contains</title>
    <style>
      #container {
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <h1 id="container">
      click here
      <p>container children</p>
    </h1>

    <script type="text/javascript">
      let containerEl = document.getElementById("container");

      function decideContains(el) {
        const bool = containerEl.contains(el.target);
        if (bool) {
          console.log("点击了 container 元素范围内");
        } else {
          console.log("点击了 container 元素范围外");
        }
      }

      document.addEventListener("click", decideContains);
    </script>
  </body>
</html>