CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)

  • CSS3 超实用属性:pointer-events (可穿透图层的鼠标事件)已关闭评论
  • 45 次浏览
  • A+
所属分类:Web前端
摘要

pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。


1、是什么

pointer-events 直译为指针事件,该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。

简而言之,就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)

2、具体属性分析

用法分析:
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all

  • auto -----默认值,与pointer-events属性未指定时的表现效果相同,对于SVG内容,该值与visiblePainted效果相同

  • none ----- 元素不再是鼠标事件的目标,鼠标不再监听当前层,而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。

    这就是穿透点击事件的关键所在!

  • 其它属性都只适用于SVG
    visiblePainted | visibleFillvisibleStrokevisible painted
    fillstroke |all

    3、实际代码使用中案例:

    1. 禁止点击

    2. 图层覆盖覆盖后,底层图层鼠标事件失效时(无法点击),可以通过这个属性来实现,使得点击穿透,来触发底层的鼠标事件。

    4、案例

    4.1、禁止点击案例

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <style>             .stopClick {                 pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件             }         </style>     </head>     <body>         <ul>             <li><a href="https://www.baidu.com/">百度</a>    </li>             <li><a href="http://example.com" class="stopClick">一个不能点击的链接</a></li>         </ul>     </body> </html>

    第二个a标签不仅无法被点击,而且没有鼠标手形样式

    4.2、点击穿透案例

    <!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <style>             .bottom {                 background: yellow;                 width: 100px;                 height: 100px;             }                          .top {                 width: 100px;                 height: 100px;                 position: absolute;                 top: 0;                 left: 0;                 z-index: 100;                 display: flex;                 justify-content: center;                 align-items: center;                  /*不再监听当前图层的鼠标事件,而去监听下一层中元素的鼠标事件*/                 pointer-events: none;               }             .top b{                 display:inline-block;                 margin: 0 auto;                  /*子元素修改pointer-events,允许触发鼠标事件*/                 pointer-events:auto;               }         </style>     </head>     <body>         <!-- 下方div -->         <div class="bottom">             <a href="http://www.baidu.com">下一层--百度</a>         </div>         <!-- 上方div -->         <div class="top" onclick="topSay()">             <b id="topTxt">顶层</b>         </div>                  <script>             document.getElementById("topTxt").onclick = function(evt){                 alert('顶层内b元素的事件!');                 evt.stopPropagation();   //阻止了事件的向上传播,否则就会触发父容器的alert事件。             }             function topSay(){                alert('顶层事件')             }         </script>     </body>  </html>

    分析如下
    原本底层被顶层覆盖,使得底层的百度跳转事件无法被触发。

    但是这里顶层设置了pointer-events: none;,使得顶层的鼠标事件被禁止,浏览器转而去监听下一层的鼠标事件,这就使得百度跳转事件又可以生效了。

    由于顶层内的子元素b继承了顶层的pointer-events: none;,使得b也无法触发鼠标事件,但是,b元素其自身又重新设置了pointer-events:auto;,使得b又可以触发鼠标事件了。

    在b元素的点击事件上,如果不加evt.stopPropagation(),去阻止事件冒泡,通过点击b,也会触发父容器的点击事件

    5、兼容性

      • IE  11+
      • Firefox  3.6+
      • Chrome 4.0+
      • Safari  6.0
      • Opera  15.0
      • iOS Safari 6.0
      • Android Browser 2.1+
      • Android Chrome 18.0+