這要追溯至 2007 年初。蘋果公司在發布首款 iPhone 前夕，遇到一個問題 —— 當時的網站都是為大屏幕設備所設計的。于是蘋果的工程師們做了一些約定，應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。這當中最出名的，當屬雙擊縮放(double tap to zoom)。這也是會有上述 300 毫秒延遲的主要原因。

當用戶一次點擊屏幕之后，瀏覽器并不能立刻判斷用戶是要進行雙擊縮放，還是想要進行單擊操作。因此，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。

于是，300 毫秒延遲就這么誕生了。

FastClick?是?FT Labs?專門為解決移動端瀏覽器 300 毫秒點擊延遲問題所開發的一個輕量級的庫。簡而言之，FastClick 在檢測到?touchend?事件的時候，會通過?DOM 自定義事件立即觸發一個模擬click?事件的click事件（自定義事件），并把瀏覽器在 300 毫秒之后真正觸發的?click?事件阻止掉。

FastClick 非常實際地解決 300 毫秒點擊延遲的問題。唯一的缺點可能也就是該腳本的文件尺寸 (盡管它不大)。如果你非常在意這點文件大小，可以嘗試一下?Filament Group?的?Tappy!，或者?tap.js。兩者都相當輕量，能夠通過監聽?tap?而非?click?事件來繞過 300 毫秒延遲。

當然，zepto庫函數中，也有一個touch模塊，此模塊也包含tap事件，可以通過綁定tap來取代click事件。

但是zepto的tap事件會有點透問題。如何解決，請看下篇分解。

接下來，我們來詳細了解一個問題：FastClick解決延遲點擊的源碼解析。

<script type="text/javascript" src="js/fastclick.js" ></script> <script>window.addEventListener( "load", function() {FastClick.attach( document.body );}, false ); </script>

?

轉載于:https://www.cnblogs.com/lhj-blog/p/7864839.html

總結

以上是生活随笔為你收集整理的苹果浏览器移动端click事件延迟300ms的原因以及解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。