pointer-events: none 的兩個應用場景

簡介

pointer-events: none 真是個神奇的屬性。

該屬性有什麼用？借用 CSS3 pointer-events:none 應用舉例及擴展 的總結來講：

pointer-events: none 顧名思義，就是鼠標事件拜拜的意思。元素應用了該 CSS 屬性，連接啊，點擊啊什麼的都變成了 「浮雲牌醬油」。pointer-events: none 的做用是讓元素實體 「虛化」。例如一個應用 pointer-events: none 的按鈕元素，則咱們在頁面上看到的這個按鈕，只是一個虛幻的影子而已，您能夠理解爲海市蜃樓，幽靈的軀體。當咱們用手觸碰它的時候能夠輕易地沒有任何感受地從中穿過去。

你們都知道 input[type=text|button|radio|checkbox] 支持 disabled 屬性，能夠實現事件的徹底禁用。若是其餘標籤須要相似的禁用效果，能夠試試 pointer-events: none

舉個簡單的例子：

<a href="http://sf.gg" style="pointer-events: none">click me</a>

這個連接，你是點不了的，而且 hover 也沒有效果。（值得一提的是，僅僅是鼠標事件失效，用 tab 鍵仍是能夠選中該連接的，而後 enter 打開，這個時候能夠去掉 a 標籤的 href 屬性，就不能讓 tab 鍵選中了）

實踐一

今天改了一個 衆審中心 的 bug。

好比，挖墳帖審覈 若是反對經過的話，須要選中理由，如圖：

從代碼角度上講，該元素是支持 click 和 hover 的。

衆審中心其實有不少子項目，用的是一個模版，可是 標籤清理 不同，它沒有勾選理由的功能（理由只是展現），可是由於用的是一套模版代碼，因此以前的 bug 就是類似位置也是可點擊的，如今要修改成不可點擊。

簡單看了下，一個 li 標籤（其實不論是啥標籤啦），直接給它加上 pointer-events: none 完美解決。

若是不這樣作，就要從 js 入手，判斷響應的模塊，去掉 click 事件（標籤清理模塊特判），而後 CSS 也要修改，hover 效果也要一塊兒去掉（標籤清理模塊須要另外構造樣式）。加上我對這裏的代碼不熟悉，可能完美解決問題須要花必定的時間。

不得不感嘆 pointer-events: none 大法好！

實踐二

SegmentFault 5 週年 是前同事 @cheri 在 SF 五週年的時候作的網頁，彈幕層用了 canvas 構造，canvas 下面的內容實際上是被 canvas 遮住了，沒法點擊。

這個時候，pointer-events: none 又要閃亮登場啦！還記得前面說的嗎，元素應用了 pointer-events: none ，其實就是海市蜃樓啦，任何事件均可以輕易從它身上穿過去！

因此咱們給 canvas 加上 pointer-events: none，真正在下面的內容就能夠被點擊了。

其實相似的例子不少，參考 CSS3 pointer-events 介紹 舉的例子：

好比在某個項目中，不少元素須要定位在一個地圖層上面，這裏就要用到不少絕對定位或者相對定位的元素，可是這樣的話，這些浮在上面的 div 或者其它元素通常都會給個寬高，或者 relative 的元素能夠不給寬高，這個時候，這些元素就會蓋住下面的地圖層，以致於地圖層沒法操做。那麼咱們就能夠給這個 div 設置 pointer-events: none，而後你就會發現下面的地圖就能夠拖動和點擊了。可是悲劇的是，操做區域自己卻沒法操做了，直接被無視掉了，不過不用擔憂，咱們能夠給裏面的元素從新設置爲 pointer-events:auto，固然，只給須要操做的元素區域設置。