JS 插件 fastclick.js 解決手機端click點擊延遲

fastclick.js 什麼用

 

加快手機的反映速度,測試是能夠用的,很快... fastclick的js

 

FastClick 是一個簡單，易於使用的JS庫用於消除在移動瀏覽器上觸發click事件與一個物理Tap(敲擊)之間的300延遲。它支持如下瀏覽器：
Mobile Safari on iOS 3 and upwards
Chrome on iOS 5 and upwards
Chrome on Android (ICS)
Opera Mobile 11.5 and upwards
Android Browser since Honeycomb
PlayBook OS 1 and upwards

對於非移動瀏覽器不啓做用，禁用縮放標籤。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

引入文件

<script type='application/javascript' src='/path/to/fastclick.js'></script>

尼瑪使用太簡單了，直接一句：

FastClick.attach(document.body);

因而全部的click響應速度直接提高，剛剛的！什麼input獲取焦點的問題也解決了！！！尼瑪若是真的能夠的話，原來改頁面的同事確定會啃了我

 

=================================================

 

http://www.zhihu.com/question/20702822

在手持設備的瀏覽器上（本處主要指代iOS和Android系統上的webkit內核的瀏覽器和嵌入在應用程序裏面的webview），

因爲兩次連續「輕觸」是「放大」的操做（即便你兩次輕觸的是一個連接或一個有click事件監聽器的元素），

因此在第一次被「輕觸」後，瀏覽器須要先等一段時間，看看有沒有所謂的「連續的第二次輕觸」

。若是有，則進行「放大」操做。沒有，纔敢放心地認爲用戶不是要放大，而是須要「click」至此纔敢觸發click事件，

致使「短按（手指接觸屏幕到離開屏幕的時間比較短）」的click事件一般約會延遲300ms左右。

 

 

採用touchstart代替click是比較初級的解決方案，首先，touchstart和click的觸發條件就有區別，對於手持設備的瀏覽器：
1.touchstart：在這個dom（或冒泡到這個dom，這固然是廢話）上手指觸摸開始即能觸發
2.click：在這個dom（或冒泡到這個dom，這固然是廢話）上手指觸摸開始，且手指不曾在屏幕上移動（某些瀏覽器容許移動一個很是小的位移值），且在這個在這個dom上手指離開屏幕，且觸摸和離開屏幕之間的間隔時間較短（某些瀏覽器不檢測間隔時間，也會觸發click）才能觸發
因而咱們能夠看到，徹底用touchstart代替是不太可取的。
根據上面的區別，又要規避click在移動手持設備上帶來的延遲，很容易有了模擬的辦法，大體思路是：
在touchstart、touchend時記錄時間、手指位置，在touchend時進行比較，若是手指位置爲同一位置（或容許移動一個很是小的位移值）且時間間隔較短（通常認爲是200ms），且過程當中不曾觸發過touchmove，便可認爲觸發了手持設備上的「click」，通常稱它爲「tap」
zepto已經封裝了上述tap：zepto/src/touch.js at master 路 madrobby/zepto 路 GitHub
另外（由下面的@張辰 同窗的回答，）還能夠直接使用Fastclick：ftlabs/fastclick · GitHub來模擬點擊，也不會有延遲，目前我已經遷移到此方案。
更新：

• zepto先前的實現方案有一些小問題，某些狀況下會致使點透（http://blog.youyo.name/archives/zepto-tap-click-through-research.html），如今最新版的已經修復了這個問題。
• 在安卓4.1+的chrome瀏覽器上，若是在meta viewport中指定頁面不可縮放，則click沒有上述300ms左右的延遲