小细节问题，相信大家在学习前端过程中，了解过一些隐藏dom的方法，那么今天对于这些方法的特点进行一些总结，同时探讨一个问题，被隐藏后是否可以触发相关的事件呢，或者说隐藏后保留占位的元素，是否仍然可点击呢。本章篇幅比较短，总结了元素CSS隐藏的方法和它们的一些特点，希望对大家有些些帮助。
元素隐藏方式
- display：none
- visibility: hidden
- opacity: 0
- （特别的方法：移出去）position: absolute; left: -10000px
- （特别的方法：盖起来）z-index: -1
讨论以及相关测试
这里我们就直接讨论前三种方法，后面的特殊方法不作讨论。
测试
测试的相关代码情况如上图所示，可以说非常的易懂，简单来说，就是给每个dom元素绑定了相关的隐藏事件，并打印相关信息。
display:none
点击第一个区域: display：none隐藏
此时元素不占位。
并且无法点击到相关的区域
visibility: hidden
点击第二个区域: visibility: hidden隐藏
此时的元素,隐藏且占位的
注意：此时大家可能会认为，占位那就是存在，存在就是可以被点击触发的，而事实上并不能触发相关事件（当我多次点击占位区域，但是并不能触发
console.log打印）
opacity: 0
点击第三个区域：opacity:0
元素隐藏并占位
注意：此时占位被点击会触发相关事件（当我多次点击占位区域，触发了多次
console.log打印）
总结：
从上面的小测试看出，对于我们常用的方法中，虽然有些元素隐藏后仍然占位可以点击，但是不会触发相关事件。
| 隐藏事件 | |
|---|---|
| display：none | 不占位，不触发。会引起重绘重排 |
| visibility：hide | 占位，不触发。会引起重绘，一般不会引起重排它仍然占据文档流中的空间 |
| opacity：0 | 占位，触发。 会引起重绘，一般不会引起重排它仍然占据文档流中的空间 |
除了css的隐藏方法，还有我们框架中也有相关的隐藏方式，比如vue中的v-if 和 v-show指令，在使用一些隐藏情况的时候，我们也要去考虑重绘重排的问题，提高性能。
详细可以参考：项目中遇到v-if 和 v-show 使用差别vue显示隐藏的dom元素，后续要作为其他库的容器。 通过 绑定点击事件+ - 掘金 (juejin.cn)
测试代码
<style>
.display {
width: 100px;
height: 100px;
background-color: blueviolet;
}
.visibility {
width: 100px;
height: 100px;
background-color: aqua;
}
.opacity {
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div style="border: 3px solid red ;">
<div class="display">这里是display:none</div>
<div class="visibility">这里是 visibility: hidden</div>
<div class="opacity">这里是 opacity: 0</div>
</div>
<script>
var display = document.querySelector('.display');
var visibility = document.querySelector('.visibility');
var opacity = document.querySelector('.opacity');
display.addEventListener('click', function () {
display.style.display = 'none';
console.log('display')
})
visibility.addEventListener('click', function () {
visibility.style.visibility = 'hidden';
console.log('visibility')
})
opacity.addEventListener('click', function () {
opacity.style.opacity = '0';
console.log('opacity')
})
</script>
</body>
