CSS 的穿透屬性- pointer-events

標籤: CSS SVG CSS3

這個屬性滿有趣的,知道的話用在一些地方其實很方便,這邊簡單的說明一下,以往我們如果像這樣有兩個區塊疊在一起,在下面那個就會感應不到,像這樣:

 

當我們把上面那一個 div 修改屬性為 pointer-events:none 時,下面的就可以感應到了,只是相對的上面那塊就不會有反應了。

 

 這個屬性給 svg 可以玩得更多,完整的屬性說明如這篇文章介紹:

auto
pointer-events 未指定時的預設屬性,對於SVG内容,該值与visiblePainted效果相同
none
元素永遠不會成為滑鼠事件的target。但是,當其後代元素的pointer-events屬性指定其他值時,滑鼠事件可以指向後代元素,在這種情况下,滑鼠事件將在捕獲或冒泡階段觸發父元素的事件真聽器。

visiblePainted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標:


visibility屬性值為visible,且滑鼠游標在元素内部,且fill屬性指定了none之外的值
visibility屬性值為visible,滑鼠游標在元素邊界上,且stroke屬性指定了none之外的值

visibleFill
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素内部時,元素才會成為滑鼠事件的目標,fill屬性的值不影響事件處理。
visibleStroke
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素邊界時,元素才會成為滑鼠事件的目標,stroke屬性的值不影響事件處理。
visible
只適用於SVG。只有在元素visibility屬性值为visible,且滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標,fill和stroke屬性的值不影響事件處理。
painted
只適用於SVG。元素只有在以下情况才會成為滑鼠事件的目標:


滑鼠游標在元素内部,且fill屬性指定了none之外的值
滑鼠游標在元素邊界上,且stroke屬性指定了none之外的值

visibility屬性的值不影響事件處理。
fill
只適用於SVG。只有滑鼠游標在元素内部时,元素才會成為滑鼠事件的目標,fill和visibility屬性的值不影響事件處理。
stroke
只適用於SVG。只有滑鼠游標在元素邊界上時,元素才會成為滑鼠事件的目標,stroke和visibility屬性的值不影響事件處理。
all
只適用於SVG。只有滑鼠游標在元素内部或邊界時,元素才會成為滑鼠事件的目標,fill、stroke和visibility屬性的值不影響事件處理。