CSS3 超实用属性：pointer-events （可穿透图层的鼠标事件）

css3,pointer,events · 浏览次数 : 11

小编点评

```

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | allauto

``` **具体属性分析用法分析：** * `pointer-events: auto`：默认值，允许所有鼠标事件监听。 * `pointer-events: none`：禁止所有鼠标事件监听。 * `pointer-events: visiblePainted`：仅允许鼠标事件在元素被绘制的区域进行处理。 * `pointer-events: visibleFill`：仅允许鼠标事件在元素被填充的区域进行处理。 * `pointer-events: visibleStroke`：仅允许鼠标事件在元素的边框进行处理。 * `pointer-events: visible`：允许鼠标事件在元素的任何区域进行处理。 * `pointer-events: none | none | none | none | none | none | none`：与 `pointer-events: auto` 相同，但适用于 SVG 内容。 **案例4.1、禁止点击案例：** ```html 不可点击的链接 ``` **案例4.2、点击穿透案例：** ```html

顶层事件

``` **兼容性分析：** `pointer-events` 属性的默认值为 `auto`，也就是说所有鼠标事件都会被监听。 * 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+。 **其他提示：** * `pointer-events` 属性只能用于 `element` 元素的属性。 * `pointer-events` 属性仅对鼠标事件有效。其他事件，如键盘事件，可能不受影响。

正文

1、是什么

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

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

2、具体属性分析

auto -----默认值，与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
none ----- 元素不再是鼠标事件的目标，鼠标不再监听当前层，而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

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

其它属性都只适用于SVG
visiblePainted ｜ visibleFill｜visibleStroke｜visible painted
fill｜stroke ｜all

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

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

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+