怎么实现系列：7.元素隐藏后是否还会触发点击事件
2024-02-12 14:32:12
我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛
距离4月征文活动快过去大半个月了。当时自己刚注册掘金账号，掘金就举办了4月征文活动。我也有幸参与了4月征文活动。当时一方面如液冲由于自己还没想好要写什么文章、还没准备好，一方面工作也比较忙，没有太多时间来写文章。导致这次征文活动，自己写了7篇文章，只通关了第一关。
这次掘金举办初夏创意投稿大赛，自己又可以参与掘金的大赛活动了，同时再次开启自己的文笔之路。
现在是初夏时间，马上快要进入夏天了，天气慢慢开始变热，自己写文章的热情也要热起来！
系列介绍经常会被面试官问到这个怎么实现，或者怎么实现xx？
有些功能或者效果没有做过或者实现过，回答不出来，场面一度有些尴尬
于是打算出一个怎么实现系列，来实现xx功能或者xx效果，以此来提升自己的实战效果和能力。
本埋衡系列是一个开放系列，我实现的不一定是最好的，欢迎大家交流讨论
场景面试官：让一个元素隐藏有哪些方式呢？
我：可以设置样式为display:none;或者visibility:hidden;
面试官：那元素设置为visibilty:hidden;后，元素还会触发点击事件吗？
（思考了一会）
我：不太确定是否会触发
面试官：...
资料让元素隐藏的方式，有下面几种方式。主要是通过设置样式的方式，来让元素隐藏
display:none
visibility:hidden
opacity:0
实现先创建一个html文件，定义好html结构代渣歼码片段给div添加样式，统一添加一个高度
div{height:100px;}到浏览器查看
基本的结构已经出来了，分别有3个div，它们的底部分别有一条分割线
接下来给每个div添加对应的样式，让它们隐藏起来。
.display{display:none;}.visibility{visibility:hidden;}.opacity{opacity:0;}到浏览器查看效果
现在可以看到，只剩下两个div在文档流里。
这是因为给元素添加display:none后，元素隐藏了，同时不在文档流里占据位置。
给元素添加visibility:hidden或者opacity:0，元素隐藏了，但是还是在文档流里占据位置
接下来，分别给后面两个div添加点击事件
<script>letvisiDom=document.querySelector(".visibility")visiDom.addEventListener("click",()=>{console.log("visiDom点击了")})letopacityDom=document.querySelector(".opacity")opacityDom.addEventListener("click",()=>{console.log("opacityDom点击了")})</script>到浏览器里，给每个div点击一下
点击visibility:hidden的div，在浏览器的控制台里，没有看到打印信息
点击opacity:0的div，在浏览器控制台里，看到打印信息
代码在码上掘金里面创建了代码块，所有代码在这个代码块里代码片段
小结样式效果是否会触发点击事件display:none隐藏否visibility:hidden隐藏否opacity:0隐藏是原文：https://juejin.cn/post/7100097250818261006热门标签
