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左右的延迟