FastClick

处理移动端click事件300毫秒延迟。FastClick 是一个简单，易于使用的js库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟。

1、为什么会延迟？

从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢？ 因为它想看看你是不是要进行双击（double tap）操作。

    在手持设备的浏览器上（本处主要指代iOS和Android系统上的webkit内核的浏览器和嵌入在应用程序里面的webview），由于两次连续“轻触”是“放大”的操作（即使你两次轻触的是一个链接或一个有click事件监听器的元素），所以在第一次被“轻触”后，浏览器需要先等一段时间，看看有没有所谓的“连续的第二次轻触”。如果有，则进行“放大”操作。没有，才敢放心地认为用户不是要放大，而是需要“click”至此才敢触发click事件，导致“短按（手指接触屏幕到离开屏幕的时间比较短）”的click事件通常约会延迟300ms左右。

2、兼容性

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 Android 2

PlayBook OS 1 and upwards

3、不应用 FastClick 的场景

1)桌面浏览器；

2)如果 viewport meta 标签 中设置了 width=device-width， Android 上的 Chrome 32+ 会禁用 300ms 延时；

3)viewport meta 标签如果设置了 user-scalable=no，Android 上的 Chrome（所有版本）都会禁用 300ms 延迟。这样就无法让用户多点触控缩放网页了

4)IE10 中，可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放.

4、使用方法

TODO: 修改使用接口

window.addEventListener('load', function() {

  FastClick.attach(document.body);

}, false);

Zepto.js:

$(function() {

FastClick.attach(document.body);

});

Copy

var attachFastClick = require('fastclick');

attachFastClick(document.body);

引入插件的JavaScript文件到你的HTML网页中,

如果你使用的browserify CommonJS的模块系统或另一种风格，其fastclick.attach函数将返回 require(‘fastclick’) 。作为一个结果，使用fastclick这些装载机的最简单的方法如下：

var attachFastClick = require('fastclick');

attachFastClick(document.body);

巴特西

FastClick

最新文章

热门文章