pointer-events

Posted on Edited on In Views: Disqus:

 

pointer-events 的用法如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <style>
        div {
            width: 100px;
            height: 100px;
            border: solid 10px blue;
            position: relative;
        }

        .ybox {
            background: rgba(255, 200, 0, .8);
            margin: 20px;
            z-index: 1;
            pointer-events: auto;
        }

            .ybox:hover {
                background: rgba(255, 50, 50, .8);
            }

        .gbox {
            background: rgba(0, 220, 170, .8);
            margin: -80px 40px 20px;
            z-index: 2;
            pointer-events: none;
            /*pointer-events: auto;*/
            /*pointer-events: fill;*/
        }

            .gbox:hover {
                background: rgba(255, 50, 50, .8);
            }

        #test {
            pointer-events: fill;
        }

            #test:hover {
                fill: blue;
            }
    </style>
</head>
<body>
    <div class="ybox"></div>
    <div class="gbox"></div>

    <svg width="200" height="140">
        <rect width="100" height="100" fill="#f00" stroke="#000" stroke-width="10" x="20" y="20" id="test"></rect>
    </svg>
</body>
</html>

說明：

1、pointer-events 的預設值為 auto。

2、若 pointer-events 的值為 none ，則該元素就無法進行點擊或 hover 的動作。

3、剩下的 pointer-events 屬性值 visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all ，

則是專門用在SVG元素上，其他元素沒效果。

 

參考資料：

穿透的 div ( pointer-events )

pointer-events

SVG Tutorial