300 毫秒延遲的來歷
這要追溯至 2007 年初。蘋果公司在發布首款 iPhone 前夕,遇到一個問題 —— 當時的網站都是為大屏幕設備所設計的。于是蘋果的工程師們做了一些約定,應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。
這當中最出名的,當屬雙擊縮放(double tap to zoom)。這也是會有上述 300 毫秒延遲的主要原因。
蘋果公司創造的雙擊縮放行為,是一種在移動設備上訪問桌面端站點的不錯的解決方案,但隨之引入的 300 毫秒點擊延遲也成為了移動端網站讓用戶感覺卡頓的罪魁禍首之一。
解決方案
與此同時,瀏覽器開發商也提出了一些解決方案。對于縮放被禁用的網站,Android 平臺上的 Chrome 和 Firefox 瀏覽器會禁用雙擊縮放功能;如果站點內配置了內容為 width=device-width
的 <meta> 標簽,Chrome 32 及以上版本的瀏覽器也會禁用雙擊縮放功能;Internet Explorer 則對元素引入了全新的 CSS 屬性,touch-action
,若將其置為touch-action: manipulation
,也會取消該元素上的點擊延遲。
由于這些解決方案較為零碎,社區里也有一些基于 JavaScript 的解決方案,包括一些指針事件的 polyfill,諸如 FastClick 之類專門為這個問題而生的腳本,以及類似 Kendo UI Mobile 等自主方案。
雖然 JavaScript 的方案很好地解決了延遲問題,但畢竟只是臨時的措施。瀏覽器本身所提供的方案,例如 Chrome 的 width=device-width 優化以及 Internet Explorer 的指針事件等,更屬長久之計。
fastclick
通過取消click的默認時間,并且使用觸屏事件來觸發click事件,所以沒有默認的click的300ms延遲