簡介
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，當然，只給需要操作的元素區域設置。