切換到移動模擬模式,並點擊按鈕,查看控制台。
發現click沒有事件沒有觸發,而touch事件依然觸發。
解決辦法:
對於移動端我們使用css來禁止按鈕,達到disable的效果:

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

auto 是默認值。
設置pointer-events:none的元素,將不會成為事件目標。但是如果其子孫元素設置了pointer-events:auto,該子孫元素仍然可成為事件目標,並且如果該事件支持冒泡,其設置了pointer-events:none的祖先元素,也會由於冒泡觸發相應的監聽事件。
又是IE拖后腿了囧,不過移動端表現良好~
總結
pointer-events這個CSS3屬性,在移動端我們基本可以“放肆”的使用,在你需要禁用某個元素事件或某個區域事件的時候,可以考慮下這個屬性,簡單高效~
嗯,終於搞明白這個屬性了!
