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


fastclick.js 什么用

 

加快手機的反映速度,測試是可以用的,很快... fastclickjs

 

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來模擬點擊,也不會有延遲,目前我已經遷移到此方案。
更新:

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM