处理移动端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网页中,
<script type='application/javascript' src='/path/to/fastclick.js'></script> 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);