css3 pointer-events:auto;详解

css3 pointer-events:auto;详解

<style type="text/css">
    #div_grandfather{
        height : 250px;
        background: orange;
        width:300px;
        border:1px solid;
          pointer-events:none;
    }
    #div_parent{
        height:70%;
        background-color:#bbb;
        margin:30px;
        border: 1px solid;
   
  
    
    }
    #div_child{
        height:70%;
        background-color:deepskyblue;
        margin:30px;
        pointer-events:auto;
        
    }
</style>
<body>
    <div id="div_grandfather" onclick="alert('grandfather')">
        <div id="div_parent" onclick="alert('parent')">
            <div id="div_child" >
            </div>
        </div>
    </div>
</body>

https://codepen.io/a6965921/pen/vYyrGeP?editors=1010

 pointer-events:none;是隐蔽事件的

  

pointer-events:auto; 是开启事件的(允许一层层查找有没有事件)
从内到外  里面可以覆盖外面的

posted @ 2021-03-04 14:20  newmiracle宇宙  阅读(2658)  评论(0)  编辑  收藏  举报