移动端点击延迟问题

问题

移动端点击事件有 300ms 延迟，为什么会出现这个问题？如何解决？

解答

延迟原因

移动端浏览器为了支持双击缩放功能，在用户点击后会等待 300ms，判断用户是否会进行第二次点击。如果 300ms 内没有第二次点击，才会触发 click 事件。

解决方案

1. 禁用页面缩放

通过 meta 标签禁用网页缩放功能：

<meta name="viewport" content="user-scalable=no">

2. 设置 ideal viewport

将 viewport 设置为理想视口宽度：

<meta name="viewport" content="width=device-width">

3. 使用 FastClick 库

引入 FastClick 库来消除延迟：

import FastClick from 'fastclick';

FastClick.attach(document.body);

点击穿透问题

延迟还可能导致点击穿透现象。当在元素上监听 touchstart 事件并隐藏该元素时，300ms 后触发的 click 事件会”穿透”到下层元素：

// 可能导致穿透的代码
element.addEventListener('touchstart', () => {
  element.style.display = 'none'; // 隐藏元素
  // 300ms 后 click 事件会触发下层元素
});

关键点

• 300ms 延迟是为了判断用户是否执行双击缩放操作
• 设置 width=device-width 可以让浏览器认为页面已适配移动端，从而取消延迟
• 使用 touchstart 替代 click 时需注意点击穿透问题
• 现代浏览器在设置合适的 viewport 后会自动取消延迟，无需额外处理