通过css的pointer-events属性，解决因层级问题阻止了点击事件

当我们给元素设置了z-index后，层级大的会盖住层级小的，如果被盖住的元素绑定了点击事件，会因为层级问题，导致点击事件不触发。

如下是简单的示例代码，

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            position: relative;
            top: 45vh;
            left: 45vw;
        }
        .demo {
            width: 200px;
            height: 200px;
            background-color: #bfa;

        }
        .demo2{
            position: absolute;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #bbf;
            z-index: 999;
            /* pointer-events: none; */
        }
    </style>
    <div class="container">  
        <div class="demo" onclick="demo()">
            demo
        </div>
        <div class="demo2" onclick="demo2()">demo2</div>
    </div>
    
    <script>
        function demo() {
            alert("demo")
        }
        function demo2() {
            alert("demo2")
        }
    </script>
     

当我们没有给层级高的设置 pointer-events属性时，会发现点击demo2的div时，demo的div的点击事件不会触发，如下图示例一样

但如果我们把pointer-events: none; 给demo2的div设置上后，就会发现，点击demo2的div，只会触发demo的div的点击事件

总结

• 当我们通过定位后给某一个元素设置了比较大的层级，但又不想影响被其盖住的元素的点击事件时，就可以给设置层级的元素使用pointer-events为none这个属性。
• 当然设置这个属性的元素本身的点击事件也会不生效哦