pointer-events，搞前端的朋友們應該聽說過這個屬性吧。每年圣誕節的時候，許多網頁上都會掛出一個雪花飄落的特效增加一些節日氣氛。有一些是用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事件就又回來了。

這就是我目前遇到了使用這個屬性最好的使用場景，那就是用來做一些特效類的交互層級比較多的頁面，當然如果你腦洞開得夠大，用它動態綁定一些元素，感覺可以玩出一些黑魔法。

如果不知道這個屬性的話，暫時我還真沒想到其它的方案解決這個難題，歡迎談談你的想法啊。不過首先你得先關注我，并轉發呢，也可以加我Q群：142991222一起分享，這樣我們的友誼才能天長地久。

另外，因為是css3屬性，不支持IE直到9！