处理移动端click事件300ms延迟的好方法—FastClick

下载地址：https://github.com/ftlabs/fastclick

1、click事件为什么有延迟？

“...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.”

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

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不附加任何监听器在桌面浏览器上面，所以如果你的项目不是针对的移动浏览器，那么就不要使用这个插件。

Android 设备上的 google浏览器（Chrome） 32+ 版本，在meta头信息中设置width=device-width 没有300毫秒的延时，所以也无需使用本插件。

<meta name="viewport" content="width=device-width, initial-scale=1">

Chrome浏览器在安卓设备上的时候，设置meta头信息中 user-scalable=no 但是这样就无法让用户多点触控缩放网页了。

对于IE11 + 你可以设置 touch-action: manipulation; 来禁用通过双击放大某些元素例如：链接和按钮的，对于IE10使用 -ms-touch-action: manipulation 。

4、使用方法

引入插件的javascript文件到你的HTML网页中，像这样：

<script type='application/javascript' src='/path/to/fastclick.js'></script>

注意：type属性在HTML5网页中可以省略不写。

脚本必须加载到实例化fastclick在页面的任何元素之前。

实例化 fastclick 最好在body元素的前面，这是使用推荐的方法：

if ('addEventListener' in document) {

    document.addEventListener('DOMContentLoaded', function() {

        FastClick.attach(document.body);

    }, false);

}

或者你使用了jquery插件，你可以这样编写：

$(function() {

    FastClick.attach(document.body);

});

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

var attachFastClick = require('fastclick');

attachFastClick(document.body);

秒客网

处理移动端click事件300ms延迟的好方法—FastClick

相关文章