?
This document uses PHP Chinese website manual Release
pointer-events:auto| none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默認(rèn)值:auto
適用于:所有元素
繼承性:有
動(dòng)畫(huà)性:否
計(jì)算值:指定值
auto:與pointer-events屬性未指定時(shí)的表現(xiàn)效果相同。在svg內(nèi)容上與visiblepainted
值相同
none:元素永遠(yuǎn)不會(huì)成為鼠標(biāo)事件的target。但是,當(dāng)其后代元素的pointer-events屬性指定其他值時(shí),鼠標(biāo)事件可以指向后代元素,在這種情況下,鼠標(biāo)事件將在捕獲或冒泡階觸發(fā)父元素的事件偵聽(tīng)器。
其他值只能應(yīng)用在SVG上。
使用pointer-events
來(lái)阻止元素成為鼠標(biāo)事件目標(biāo)不一定意味著元素上的事件偵聽(tīng)器永不會(huì)觸發(fā)。如果元素后代明確指定了pointer-events
屬性并允許其成為鼠標(biāo)事件的目標(biāo),那么指向該元素的任何事件在事件傳播過(guò)程中都將通過(guò)父元素,并以適當(dāng)?shù)姆绞接|發(fā)其上的事件偵聽(tīng)器。當(dāng)然位于屏幕上在父元素上但不在后代元素上的鼠標(biāo)活動(dòng)都不會(huì)被父元素和后代元素捕獲(將會(huì)穿過(guò)父元素而指向位于其下面的元素)。
對(duì)應(yīng)的腳本特性為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+ |
11.0+ | 3.6+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>pointer-events_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> a[href="http://example.com"] { pointer-events: none; } </style> </head> <body> <ul> <li><a href="https://developer.mozilla.org/">MDN</a></li> <li><a href="http://example.com">一個(gè)不能點(diǎn)擊的鏈接</a></li> </ul> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例