fastclick.js --- 解决移动端点击事件300ms延时

2025-02-13 技术教程

Fast Click 是一个简单、易用的库，专为消除移动端浏览器从物理触摸到触发点击事件之间的300ms延时。

为什么会存在延迟呢？

从你触摸按钮到触发点击事件，移动端浏览器会等待接近300ms，原因是浏览器会等待以确定你是否执行双击事件

兼容性

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

何时不需要使用

1、FastClick 不会伴随监听任何桌面浏览器

2、Android 系统中，在头部 meta 中设置 width=device-width的Chrome32+ 浏览器不存在300ms 延时，所以，也不需要

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

3、同样的情况也适用于 Android设备（任何版本），在viewport 中设置user-scalable=no，但这样就禁止缩放网页了

4、IE11+ 浏览器中，你可以使用 touch-action: manipulation; 禁止通过双击来放大一些元素（比如：链接和按钮）。IE10可以使用-ms-touch-action: manipulation

使用方法

在 HTML 页面中引入 fastclick.js

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

script 文件必须在页面元素实例化 FastClick 之前加载

在 body 上实例化 FastClick ，推荐按照如下方法使用：

if('addEventListener'indocument){document.addEventListener('DOMContentLoaded',function(){FastClick.attach(document.body);},false);}

如果你使用的是 jQuery

$(function(){FastClick.attach(document.body);});

如果你使用的是 Browserify 或其他 CommonJS 风格的模块系统，FastClick.attach 方法会在你调用 require('fastclick')之后返回。所以，使用 FastClick 最简单的方法如下：

varattachFastClick=require('fastclick');attachFastClick(document.body);

示例：

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="format-detection"content="telephone=no"/><metaname="format-detection"content="email=no"/><metaname="viewport"content="width=device-width,initial-scale=1"><title></title><style>a{text-decoration:none;color:black;}</style></head><body><ahref="#">链接</a><scriptsrc="resources/js/jquery-1.8.3.min.js"></script><scriptsrc="resources/js/fastclick.js"></script><script>$(function(){FastClick.attach(document.body);});$('a').click(function(e){e.preventDefault();$(this).css('color','red');});</script></body></html>

通过手机来运行这段代码，使用FastCick事件，可以很明显看到，点击链接文字变红时没有了闪烁效果

Github地址：https://github.com/ftlabs/fastclick