码迷,mamicode.com
首页 > 移动开发 > 详细

JS 插件 fastclick.js 解决手机端click点击延迟

时间:2015-08-04 09:18:14      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

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

 

JS 插件 fastclick.js 解决手机端click点击延迟

标签:

原文地址:http://www.cnblogs.com/mjzhang/p/4701011.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!