问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

js点击当前以外的dom触发的问题？

头像
没有名字就是名字
    280459139
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title></title>
    <style type="text/css">
        .app1 {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
        .app2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <div class="app1"></div>

    <div class="app2"></div>

    <div class="view"></div>

    <script type="text/javascript">
        // 点击除了两个指定的dom外才触发一些操作
        const app1El = document.querySelector('.app1')
        const app2El = document.querySelector('.app2')
        // document.addEventListener('click', (e) => {
        //   if (!app1El.contains(e.target) && !app2El.contains(e.target)) {
        //     document.querySelector('.view').innerHTML = '点击白色的区域才能进来'
        //   }
        // })

    // -----------------------------------------------------------

    // 以上代码是没问题的，但是我想封装起来，因为可能会有多个dom的情况，我是这么写的
        function isClickInQueryDom(doms = [], callback) {
          if (!doms.length) return new Error('未传入指定节点')
          document.addEventListener('click', (e) => {
              // 我知道循环数组的方法正常情况下是无法循环dom的，但是不知道怎么解决
              const flag = doms.some(dom => !dom.contains(e.target))
              callback && callback(flag)
          })
        }
        // 调用方式
        isClickInQueryDom([app1El, app2El], (flag) => {
            if (flag) {
                document.querySelector('.view').innerHTML = '点击白色的区域才能进来'
            }
     })
    </script>
    
</body>
</html>
    前端javascripthtmlvue.jsreact
    阅读 2.4k
    3 个回答
    得票最新
    头像
    xiaohuihui
      672
      ✓ 已被采纳

      image.png

      头像
      XiongMiao
        6391515
        头像
        玛拉_以琳
          8.7k41542

          你看我理解的对不对:

              const app1El = document.querySelectorAll('.app1')
    console.log(app1El);
    app1El.forEach(item => {
      console.log(item);
    })

          image.png

          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题