JS点击空白处让指定元素隐藏
作者:
光头小青蛙 | 来源:发表于
2019-07-28 11:07 被阅读0次
- 在项目开发中遇到这种需求,模拟的一个
select
点击展开,然后点击空白处的时候,让select
收回隐藏。实现这个需求可以使用addEventListener
事件监听实现。
- 思路就是监听整个文档的点击事件,如果点击的节点是被目标节点包含,就让指定元素隐藏。
- 使用到
contains
方法,如果指定的节点被其包含返回true
,否则返回false
。
- html代码
<div id="name">
<div id="app">
name
</div>
</div>
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
网友评论