在一般的情況下,移動端瀏覽器監(jiān)聽點擊事件的時候都存在一個300ms的點擊延遲,也就是說,當我們點擊頁面的時候移動端瀏覽器并不是立即作出反應,而是等待一段時間才會出現(xiàn)點擊的效果。這個問題來自于雙擊事件,因為在移動端中存在雙擊縮放的操作,例如當你點擊一個跳轉鏈接標簽的時候,瀏覽器不能直接判斷你是想要立即跳轉,還是要縮放頁面,所以就存在了一個300ms的延遲,如果在延遲內再次點擊便會縮放,否則便會跳轉。
而現(xiàn)在這300ms的點擊延遲就變得非常雞肋,直接就影響到了頁面之間切換的流暢性,所以就要想辦法消除這300ms的延遲
第一種辦法就是在css中增加屬性:touch-action
寫法:
* { touch-action: none; /*當觸控事件發(fā)生在元素上時,不進行任何操作*/ }
直接將所有的其他手勢事件全都禁用掉,便能達到消除延遲的目的,但是這個屬性在很多瀏覽器中都存在不兼容的問題,而且當設置完這個屬性之后,頁面的滾動也會隨之被禁用,慎用。
第二種辦法是在head中增加meta鏈接禁用縮放
寫法:
意為將頁面設置為無法縮放,所以就是禁用掉了雙擊縮放的功能,從而達到消除延遲的目的。
以上方法在ios端都無法實現(xiàn)消除延遲的目的,fastclick便能完美兼容各種瀏覽器
寫法: