美文网首页
JS点击空白处让指定元素隐藏

JS点击空白处让指定元素隐藏

作者: 光头小青蛙 | 来源:发表于2019-07-28 11:07 被阅读0次
  • 在项目开发中遇到这种需求,模拟的一个select点击展开,然后点击空白处的时候,让select收回隐藏。实现这个需求可以使用addEventListener事件监听实现。
  • 思路就是监听整个文档的点击事件,如果点击的节点是被目标节点包含,就让指定元素隐藏。
  • 使用到contains方法,如果指定的节点被其包含返回true,否则返回false
  • html代码
<div id="name">
        <div id="app">
            name
        </div>
    </div>
  • JS代码
let app = document.getElementById("app");
let name = document.getElementById("name");
document.body.addEventListener("click", function (e) {
        if (!name.contains(e.target)) {
            app.style.display = "none";
            console.log("当前节点被包含")
        } else {
            console.log("当前点击的节点不被其包含")
        }
    })

相关文章

网友评论

      本文标题:JS点击空白处让指定元素隐藏

      本文链接:https://www.haomeiwen.com/subject/pfuurctx.html