pointer-events屬性
http://www.css88.com/book/css/properties/user-interface/pointer-events.htm
在上層的div中加入這個屬性,pointer-events:none; 能很好的解決這個問題。
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默認值:auto
適用於:所有元素
繼承性:有
動畫性:否
計算值:指定值
取值:
- auto:
-
與pointer-events屬性未指定時的表現效果相同。在svg內容上與
visiblepainted
值相同 - none:
- 元素永遠不會成為鼠標事件的target。但是,當其后代元素的pointer-events屬性指定其他值時,鼠標事件可以指向后代元素,在這種情況下,鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。
- 其他值只能應用在SVG上。
說明:
設置或檢索在何時成為屬性事件的target。
- 使用
pointer-events
來阻止元素成為鼠標事件目標不一定意味着元素上的事件偵聽器永不會觸發。如果元素后代明確指定了pointer-events
屬性並允許其成為鼠標事件的目標,那么指向該元素的任何事件在事件傳播過程中都將通過父元素,並以適當的方式觸發其上的事件偵聽器。當然位於屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲(將會穿過父元素而指向位於其下面的元素)。 - 對應的腳本特性為pointerEvents。
兼容性:
- 淺綠 = 支持
- 紅色 = 不支持
- 粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0-10.0 | 2.0-3.5 | 4.0+ | 6.0 | 15.0 | 6.0 | 2.1+ | 18.0+ |