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

  • 在项目开发中遇到这种需求,模拟的一个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("当前点击的节点不被其包含")
        }
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、API介绍 HTML:用来存储网页内容;CSS:用来定义这些内容的显示样式;JavaScript:用来创造丰富...
    宠辱不惊丶岁月静好阅读 2,510评论 0 4
  • 声明:本文来源于http://www.webzsky.com/?p=731我只是在这里作为自己的学习笔记整理一下(...
    angryyan阅读 7,134评论 1 6
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,615评论 0 7
  • Dom事件 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件 (一) Eve...
    woow_wu7阅读 1,812评论 0 1
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,556评论 1 11