pointer-events吴趴，搞前端的朋友們應(yīng)該聽(tīng)說(shuō)過(guò)這個(gè)屬性吧。每年圣誕節(jié)的時(shí)候，許多網(wǎng)頁(yè)上都會(huì)掛出一個(gè)雪花飄落的特效增加一些節(jié)日氣氛锣枝。有一些是用flash實(shí)現(xiàn)的厢拭，也有用HTML+js實(shí)現(xiàn)的。當(dāng)時(shí)就很好奇為何在頁(yè)面z軸最上層增加了一個(gè)層卻完全不會(huì)影響下面元素的任何事件響應(yīng)撇叁。簡(jiǎn)直是前端黑科技供鸠。
后來(lái)看了大神的解釋?zhuān)瓉?lái)只用了一個(gè)的css屬性pointer-events就可以搞定一切了。
看上去確實(shí)很神奇陨闹，以為會(huì)是事件冒泡代理轉(zhuǎn)發(fā)之類(lèi)的很難懂的概念楞捂。實(shí)際上超級(jí)簡(jiǎn)單，對(duì)某一個(gè)元素比如div采用div{pointer-events:none}即可讓這個(gè)HTML元素（包括它的所有子孫元素）失去所有的事件響應(yīng)趋厉。鼠標(biāo)焦點(diǎn)會(huì)直接無(wú)視它寨闹，click、mouseover等所有事件會(huì)穿透它到達(dá)它的下一級(jí)元素君账。這個(gè)屬性看起來(lái)似乎很有用繁堡，讓我一直都想怎樣在項(xiàng)目中能有點(diǎn)實(shí)際的意義。
直到這兩天看到網(wǎng)上一個(gè)數(shù)據(jù)可視化的項(xiàng)目案例乡数，終于找到了一個(gè)用武之地椭蹄。
如圖，頁(yè)面z軸上分兩層净赴，底層是基于百度地圖和Echarts做的全屏大地圖绳矩，上層container容器也是全屏的，是用Vue+webSocket做的實(shí)時(shí)圖表table和信息展示文字及header部分玖翅，看著簡(jiǎn)直完美翼馆。跑起來(lái)測(cè)試，地圖無(wú)法用滾輪縮放移動(dòng)了烧栋，Echart的組件也無(wú)法點(diǎn)擊交互了写妥。原因也很簡(jiǎn)單，上層的container層把地圖‘擋住了’审姓，這種時(shí)候用pointer-events就很有用了珍特，直接pointer-events:none搞定。但是這樣一來(lái)table因?yàn)槔^承的關(guān)系魔吐，里面的交互事件也用不了了（本來(lái)每行點(diǎn)擊可以彈一個(gè)dialog展示詳情的）扎筒，這時(shí)候可以針對(duì)table單獨(dú)用一個(gè)pointer-events:auto事件就又回來(lái)了。
這就是我目前遇到了使用這個(gè)屬性最好的使用場(chǎng)景酬姆，那就是用來(lái)做一些特效類(lèi)的交互層級(jí)比較多的頁(yè)面嗜桌，當(dāng)然如果你腦洞開(kāi)得夠大，用它動(dòng)態(tài)綁定一些元素辞色，感覺(jué)可以玩出一些黑魔法骨宠。
如果不知道這個(gè)屬性的話，暫時(shí)我還真沒(méi)想到其它的方案解決這個(gè)難題，歡迎談?wù)勀愕南敕ò〔阋凇２贿^(guò)首先你得先關(guān)注我桦卒，并轉(zhuǎn)發(fā)呢，也可以加我Q群：142991222一起分享匿又，這樣我們的友誼才能天長(zhǎng)地久方灾。
另外，因?yàn)槭莄ss3屬性碌更，不支持IE直到9裕偿！
