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

站长

2024年07月05日 09:31 · 阅读数 5

<!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>

1个回答

test

2024-07-05

answer image

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容