移动端点击事件在快速点击时偶尔触发两次怎么办？

文亭提问于 2026-02-18 04:03:28 阅读 41

移动

在移动端列表项上用了click事件，但快速点击时偶尔会触发两次，比如这样：


item.addEventListener('click', () => {
  console.log('被点击了');
});

试过给事件加防抖函数，但没用。检查代码逻辑没问题，单击正常，就是连续快戳的时候偶尔会多触发一次。是不是移动端特有的问题？

我来解答赞 20 收藏

反馈

2 条解答

小艺嘉 Lv1

这问题我见过好几次，基本就是移动端的“点击穿透”或者“双击模拟”导致的。浏览器在移动端为了兼容桌面端的双击缩放，会在 touchend 后延迟约 300ms 再触发 click，如果你快速点两下，第二下可能就刚好落在前一个 click 的延迟窗口里，结果就触发了两次。

防抖没用是因为防抖是针对同一次点击的重复触发，但你这其实是两次独立的点击事件，只是间隔太短被误判了。

最稳妥的解法是直接禁用 click 的延迟机制，用 touchstart 或 touchend 代替，或者加个 touch-action: manipulation。
如果一定要用 click，可以这样：

let lastClickTime = 0;



item.addEventListener('click', (e) => {

  const now = Date.now();

  if (now - lastClickTime < 300) {

    e.preventDefault();

    e.stopPropagation();

    return;

  }

  lastClickTime = now;

  console.log('被点击了');

});

或者更彻底点，在 CSS 里加：

* {

  touch-action: manipulation;

}

这个属性能告诉浏览器“我不会双击缩放”，浏览器就不再等 300ms 了，click 会立刻触发，双击问题基本就没了。
不过记得测试下，有些老安卓机对 touch-action 支持不好，但基本主流都 OK 了。

2026-02-24 04:07

上官芯依 Lv1

用 touchstart 替代 click，或者加个标志位防重复触发。代码如下：

let lock = false;

item.addEventListener('click', () => {

  if (lock) return;

  lock = true;

  console.log('被点击了');

  setTimeout(() => lock = false, 300); // 300ms锁定期

});

搞定。

2026-02-18 05:00