safari瀏覽器click事件要點擊兩次纔有響應出現閃爍

閃爍問題
因爲在iOS Safari上click事件存在300ms響應延時，因此爲touch事件添加樣式，會和click事件默認樣式疊加而產生閃爍問題。

由於ios safari瀏覽器中對觸摸事件的響應順序是：

ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick

快速解決問題的方法：

消除click默認樣式
經過講click事件樣式的alpha通道設置爲0（透明），消除click事件的閃爍效果

-webkit-tap-highlight-color: rgba(0,0,0,0);

消除click延時

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

FastClick 很是實際地解決 300 毫秒點擊延遲的問題，惟一的缺點可能也就是該腳本的文件尺寸 (儘管它只有10kb)。若是你連這10kb都接受不了的話，那麼移動端類庫 jQuery和zepto.js都支持tap事件來解決這個問題，儘管它們的響應速度比FastClick慢一些。

iOS端click事件響應延時（300ms）的緣由

2007 年初。蘋果公司在發佈首款 iPhone 前夕，遇到一個問題：當時的網站都是爲大屏幕設備所設計的。因而蘋果的工程師們作了一些約定，應對 iPhone 這種小屏幕瀏覽桌面端站點的問題。 這當中最出名的，當屬雙擊縮放(double tap to zoom)，這也是會有上述 300 毫秒延遲的主要緣由。雙擊縮放，顧名思義，即用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。




那麼這和 300 毫秒延遲有什麼聯繫呢？ 假定這麼一個場景。用戶在 iOS Safari 裏邊點擊了一個連接。因爲用戶能夠進行雙擊縮放或者雙擊滾動的操做，當用戶一次點擊屏幕以後，瀏覽器並不能馬上判斷用戶是確實要打開這個連接，仍是想要進行雙擊操做。所以，iOS Safari 就等待 300 毫秒，以判斷用戶是否再次點擊了屏幕。 鑑於iPhone的成功，其餘移動瀏覽器都複製了 iPhone Safari 瀏覽器的多數約定，包括雙擊縮放，幾乎如今全部的移動端瀏覽器都有這個功能。

以前人們剛剛接觸移動端的頁面，在欣喜的時候每每不會care這個300ms的延時問題，但是現在touch端界面如雨後春筍，用戶對體驗的要求也更高，這300ms帶來的卡頓慢慢變得讓人難以接受。

fastclick

詳情參考文檔