解決移動端點擊事件的穿透問題之CSS3新屬性:pointer-events


在做移動端的頁面時,經常會遇到點擊(touch)一個彈出的層,在上面觸發點擊(touch)事件,當彈出層關閉之后點擊(touch)事件會穿透到下面的層,這時候如果下一層的某個元素也綁定了點擊(touch)事件,就會也一起被觸發,如何解決這所謂的bug?解決這一問題需要用到css3的新屬性,pointer-events,下面先看一下他的屬性設置值,可以在下面層綁定點擊(touch)事件添加這一css3屬性,在彈出層消失的時候設置一個setTimeout延遲時間(500ms),之后再把這一屬性值移除。

關於這一新屬性,具體也可以查閱http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

語法:

pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all

默認值:auto

適用於:所有元素

繼承性:有

動畫性:否

計算值:指定值

取值:

auto:與pointer-events屬性未指定時的表現效果相同。在svg內容上與visiblepainted值相同

none:元素永遠不會成為鼠標事件的target。但是,當其后代元素的pointer-events屬性指定其他值時,鼠標事件可以指向后代元素,在這種情況下,鼠標事件將在捕獲或冒泡階觸發父元素的事件偵聽器。其他值只能應用在SVG上。

說明:

設置或檢索在何時成為屬性事件的target。

  • 使用pointer-events來阻止元素成為鼠標事件目標不一定意味着元素上的事件偵聽器永不會觸發。如果元素后代明確指定了pointer-events屬性並允許其成為鼠標事件的目標,那么指向該元素的任何事件在事件傳播過程中都將通過父元素,並以適當的方式觸發其上的事件偵聽器。當然位於屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲(將會穿過父元素而指向位於其下面的元素)。
  • 對應的腳本特性為pointerEvents


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM