pointer events,乙個神奇的css屬性

2021-07-29 17:48:18 字數 790 閱讀 6067

pointer-events,搞前端的朋友們應該聽說過這個屬性吧。每年聖誕節的時候,許多網頁上都會掛出乙個雪花飄落的特效增加一些節日氣氛。有一些是用flash實現的,也有用html+js實現的。當時就很好奇為何在頁面z軸最上層增加了乙個層卻完全不會影響下面元素的任何事件響應。簡直是前端黑科技。

後來看了大神的解釋,原來只用了乙個的css屬性pointer-events就可以搞定一切了。

看上去確實很神奇,以為會是事件冒泡****之類的很難懂的概念。實際上超級簡單,對某乙個元素比如div採用div即可讓這個html元素(包括它的所有子孫元素)失去所有的事件響應。滑鼠焦點會直接無視它,click、mouseover等所有事件會穿透它到達它的下一級元素。這個屬性看起來似乎很有用,讓我一直都想怎樣在專案中能有點實際的意義。

直到這兩天看到網上乙個資料視覺化的專案案例,終於找到了乙個用武之地。

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

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

另外,因為是css3屬性,不支援ie直到9!

乙個決定,乙個轉折

距離2012年9月已經是第四個年頭,對於我,我想這是我這輩子做的第一件我很自豪,很開心的乙個決定,從生物轉向計算機,一直以來,我對自己的期望總是很高,比如說上高中的時候,希望自己至少考個二本,學習個自己喜歡的專業,然後為之奮鬥,有乙個非常激動人心的大學四年,再比如說以後賺很多很多錢,擁有屬於自己的公...

乙個建築挽救乙個城市

熊大尋創意建築設計公司認為 中國城市化和城市建設浪潮前所未有地吸引了史上最多的外國建築大師湧入中國。中國各大城市充滿了欲與天公試比高的高樓大廈。一幢幢玻璃大廈拔地而起,一座座奇形怪狀的建築安家東方大地。在這場城市建設的洋務運動中,中國市民不僅失去了自己的熟悉的故宅家園,更重要的是身邊越來越多看不懂的...

乙個你愛,乙個愛你,你選擇哪乙個

文 賴忠標 小時候可猛了 愛你的每天都會惦記著你 每天都會給你打 你愛的每天都會先打 給他 愛你的從來不會主動掛掉你的 你愛的有時候甚至連句再見都不肯說 就掛掉了 愛你的看見你受一點點小傷都難受到不行 你愛的看見如果是一點點小傷會罵你笨 愛你的自從認識你以後開始學會照顧你,關心你 你愛的你認識他以後...