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

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

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

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

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

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

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

接下來，我們來詳細(xì)了解一個問題：FastClick解決延遲點(diǎn)擊的源碼解析。

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/lhj-blog/p/7864839.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。