搞前端的朋友們應該聽說過這個屬性吧。每年聖誕節的時候，許多網頁上都會掛出一個雪花飄落的特效增加一些節日氣氛。有一些是用flash實現的，也有用HTML+js實現的。當時就很好奇為何在頁面z軸最上層增加了一個層卻完全不會影響下面元素的任何事件響應。簡直是前端黑科技。後來看了大神的解釋，原來只用了一個的css屬性pointer-events就可以搞定一切了。
看上去確實很神奇，以為會是事件冒泡代理轉發之類的很難懂的概念。實際上超級簡單，對某一個元素比如div採用div{pointer-events:none}即可讓這個HTML元素（包括它的所有子孫元素）失去所有的事件響應。滑鼠焦點會直接無視它，click、mouseover等所有事件會穿透它到達它的下一級元素。這個屬性看起來似乎很有用，讓我一直都想怎樣在項目中能有點實際的意義。直到這兩天做一個數據可視化的項目，終於找到了一個用武之地。
如圖，頁面z軸上分兩層，底層是基於百度地圖和Echarts做的全屏大地圖，上層container容器也是全屏的，是用Vue+webSocket做的實時圖表table和信息展示文字及header部分，看著簡直完美。跑起來測試，媽蛋，地圖無法用滾輪縮放移動了，Echart的組件也無法點擊交互了。原因也很簡單，上層的container層把地圖『擋住了』，這種時候用pointer-events就很有用了，直接pointer-events:none搞定。但是這樣一來table因為繼承的關係，裡面的交互事件也用不了了（本來每行點擊可以彈一個dialog展示詳情的），這時候可以針對table單獨用一個pointer-events:auto事件就又回來了。
這就是我目前遇到了使用這個屬性最好的使用場景，那就是用來做一些特效類的交互層級比較多的頁面，當然如果你腦洞開得夠大，用它動態綁定一些元素，感覺可以玩出一些黑魔法。如果不知道這個屬性的話，暫時我還真沒想到其它的方案解決這個難題，歡迎談談你的想法啊。
另外，因為是css3屬性，不支持IE直到9！
ps：早睡早起，常做運動，多與異性交朋友～