移动端click事件延迟300ms的原因以及解决办法

发表于 更新于 分类于

产生的原因

在移动端触发时间会按照 touchstart，touchmove，touchend，click 顺序触发；触发 touchend，click 之间会有 200-400 不等的时间延时（因为移动端需要判断用户是不是想要进行双击）

解决方法

  1. FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件的 click 事件（自定义事件），并把浏览器在 300 毫秒之后真正触发的 click 事件阻止掉。
1
2
3
4
5
6
7
window.addEventListener(
  "load",
  function () {
    FastClick.attach(document.body);
  },
  false
);
  1. 禁用缩放

当 HTML 文档头部包含如下 meta 标签时：

1
2
<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1" />

表明这个页面是不可缩放的，那双击缩放的功能就没有意义了，此时浏览器可以禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。