你一定要知道的小细节！dom元素被隐藏是否都是不能触发事件的呢

本文链接：https://blog.youkuaiyun.com/photobooth/article/details/144425863

这是一个小细节问题，相信大家在学习前端过程中，了解过一些隐藏dom的方法，那么探讨一个问题，dom被隐藏后是否可以触发相关的事件呢，或者说隐藏后保留占位的元素，是否仍然可点击呢。

元素隐藏方法

display：none
visibility: hidden
opacity: 0
（特别的方法：移出去）position: absolute; left: -10000px
（特别的方法：盖起来）z-index: -1

总结

对于我们常用的方法中，虽然有些元素隐藏后仍然占位可以点击，但是不会触发相关事件。

隐藏事件
display：none	不占位，不触发。会引起重绘重排
visibility：hide	占位，不触发。会引起重绘，一般不会引起重排它仍然占据文档流中的空间
opacity：0	占位，触发。会引起重绘，一般不会引起重排它仍然占据文档流中的空间

除了css的隐藏方法，还有我们框架中也有相关的隐藏方式，比如vue中的v-if 和 v-show指令，在使用一些隐藏情况的时候，我们也要去考虑重绘重排的问题，提高性能。

测试代码

<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>