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

喆星高照發表於2024-05-29
CSSS3穿透事件

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 ｜ visibleFill｜visibleStroke｜visible painted
    fill｜stroke ｜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+

相關文章