CSS3 超實用屬性：pointer-events （可穿透圖層的滑鼠事件）

-Advertisement-

1、是什麼 pointer-events 直譯為指針事件，該屬性指定在什麼情況下某個DOM可以成為滑鼠事件的 target。簡而言之，就是允許/禁止DOM的滑鼠事件(click事件、hover事件、mouse事件等滑鼠事件) 2、具體屬性分析用法分析：pointer-events: auto | ...

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+

本文來自博客園，作者：喆星高照，轉載請註明原文鏈接：https://www.cnblogs.com/houxianzhou/p/18220412

您的分享是我們最大的動力!