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来模拟点击,也不会有延迟,目前我已经迁移到此方案。
更新:

 

posted on 2015-08-04 09:02  轨道  阅读(3743)  评论(0编辑  收藏  举报

导航