移动端 FastClick

处理移动端 click 事件 300 毫秒延迟, 由 FT Labs 开发,Github 项目地址:https://github.com/ftlabs/fastclick

为什么存在延迟?

According to Google:

...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)操作。

使用方法

具体的使用方法有很多种,在这里只列举一种。具体参考 https://github.com/ftlabs/fastclick

使用 npm 安装:

npm install fastclick --save
import FastClick from 'fastclick'

FastClick.attach(document.body)
不使用 FastClick 的场景
  • 桌面浏览器
  • 如果 viewport meta 标签中设置了 width=device-width, Android 上的 Chrome 32+ 会禁用 300ms 延时,所以也无需使用本插件
<meta name="viewport" content="width=device-width, initial-scale=1">
  • viewport meta 标签如果设置了 user-scalable=no,Android 上的 Chrome(所有版本)都会禁用 300ms 延迟,但是这样就无法让用户多点触控缩放网页了
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容