300 毫秒延遲的來歷

這要追溯至 2007 年初。蘋果公司在發(fā)布首款 iPhone 前夕，遇到一個問題 —— 當(dāng)時的網(wǎng)站都是為大屏幕設(shè)備所設(shè)計的。于是蘋果的工程師們做了一些約定，應(yīng)對 iPhone 這種小屏幕瀏覽桌面端站點的問題。

這當(dāng)中最出名的，當(dāng)屬雙擊縮放(double tap to zoom)。這也是會有上述 300 毫秒延遲的主要原因。
蘋果公司創(chuàng)造的雙擊縮放行為，是一種在移動設(shè)備上訪問桌面端站點的不錯的解決方案，但隨之引入的 300 毫秒點擊延遲也成為了移動端網(wǎng)站讓用戶感覺卡頓的罪魁禍?zhǔn)字弧?/p>

解決方案

與此同時，瀏覽器開發(fā)商也提出了一些解決方案。對于縮放被禁用的網(wǎng)站，Android 平臺上的 Chrome 和 Firefox 瀏覽器會禁用雙擊縮放功能；如果站點內(nèi)配置了內(nèi)容為 width=device-width 的 <meta> 標(biāo)簽，Chrome 32 及以上版本的瀏覽器也會禁用雙擊縮放功能；Internet Explorer 則對元素引入了全新的 CSS 屬性，touch-action，若將其置為touch-action: manipulation，也會取消該元素上的點擊延遲。

由于這些解決方案較為零碎，社區(qū)里也有一些基于 JavaScript 的解決方案，包括一些指針事件的 polyfill，諸如 FastClick 之類專門為這個問題而生的腳本，以及類似 Kendo UI Mobile 等自主方案。

雖然 JavaScript 的方案很好地解決了延遲問題，但畢竟只是臨時的措施。瀏覽器本身所提供的方案，例如 Chrome 的 width=device-width 優(yōu)化以及 Internet Explorer 的指針事件等，更屬長久之計。

fastclick

通過取消click的默認(rèn)時間，并且使用觸屏事件來觸發(fā)click事件，所以沒有默認(rèn)的click的300ms延遲