iphone移動端click事件延遲300ms解決方案

NO IMAGE

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

1.粗暴型:禁用縮放 

<meta name="viewport" content="width=device-width, user-scalable=no">

這個屬於簡單粗暴型的,雖然看似完美,但有一個致命的缺陷,當你必須完全禁用縮放來達到目的時候,就傻眼了,只有特定場景下的互動介面,此方案才可行,其它大多數情況,此法都不可行。 另外:Chrome
開發團隊不久前宣佈,在 Chrome 32 這一版中,他們將在包含 width=device-width 或者置為比 viewport 值更小的頁面上禁用雙擊縮放。當然,沒有雙擊縮放就沒有 300 毫秒點選延遲。

2.FastClick:閃亮登場 
FastClick是FT Labs專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。簡而言之,FastClick 在檢測到 touchend 事件的時候,會通過 DOM 自定義事件立即觸發一個模擬
click 事件,並把瀏覽器在 300 毫秒之後真正觸發的click事件阻止掉。 
FastClick 的使用方法非常簡單,引用FastClick.js檔案,在 window load 事件之後,在body上呼叫FastClick.attach()即可。

window.addEventListener( "load", function() { FastClick.attach( document.body );}, false );

attach方法雖可在更具體的元素上呼叫,直接繫結到body上可以確保整個應用都能受益。當 FastClick
檢測到當前頁面使用meta設定了user-scalable=no或者 touch-action 屬性的解決方案時,會靜默退出。可以說,這是真正的跨平臺方案出來之前一種很好的變通方案。 
就目前而言,FastClick 非常實際地解決 300 毫秒點選延遲的問題,唯一的缺點可能也就是該指令碼的檔案尺寸 (儘管它只有10kb)。如果你連這10kb都接受不了的話,那麼移動端類庫 jQuery和zepto.js都支援tap事件來解決這個問題,儘管它們的響應速度比FastClick慢一些。