button按鈕的狀態為disabled禁用狀態,click事件無法觸發,但是為什么touchstart下卻依然可以觸發


切換到移動模擬模式,並點擊按鈕,查看控制台。

發現click沒有事件沒有觸發,而touch事件依然觸發。

解決辦法:

對於移動端我們使用css來禁止按鈕,達到disable的效果:

對,就是這個神奇的pointer-events屬性!回憶一下,很早前就看到過這個屬性,不過當時並沒有進入到移動端的開發領域,對它的作用並沒有過多關注。我們來看一下mdn上怎么說的:

auto 是默認值。

設置pointer-events:none的元素,將不會成為事件目標。但是如果其子孫元素設置了pointer-events:auto,該子孫元素仍然可成為事件目標,並且如果該事件支持冒泡,其設置了pointer-events:none的祖先元素,也會由於冒泡觸發相應的監聽事件。

又是IE拖后腿了囧,不過移動端表現良好~

總結

pointer-events這個CSS3屬性,在移動端我們基本可以“放肆”的使用,在你需要禁用某個元素事件或某個區域事件的時候,可以考慮下這個屬性,簡單高效~

嗯,終於搞明白這個屬性了!


免責聲明!

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



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