原生 js点击空白处关闭遮罩层（关闭某个div）

最新推荐文章于 2023-08-04 10:56:12 发布

原创最新推荐文章于 2023-08-04 10:56:12 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #jquery

该代码段使用JavaScript实现了一个功能，即当用户点击页面非.controlHeaddiv之外的空白地方时，会关闭这个div。它通过事件监听和contains方法来判断点击目标是否在特定元素内。

如图所示点击空白处关闭此div

document.addEventListener('click', function(e) {//监听页面点击事件
        var screenDoc = document.querySelector('.controlHead');//需要关闭的div
        var control = document.querySelector('.control');//设置的按钮
        if (screenDoc && !screenDoc.contains(e.target) && !control.contains(e.target)) {
            screenDoc.style.display = "none";
            conIs = true;
        }
    }, false)