移动端触摸事件有300ms延迟怎么解决？

瑞红 ☘︎ 提问于 2026-02-02 13:36:32 阅读 103

移动

我正在给移动端网页加点击反馈，发现用ontouchend事件触发按钮高亮时，总要等半秒才生效。试过设置-webkit-tap-highlight-color透明也没用，代码如下：


element.ontouchend = function() {
  this.classList.add('active');
  setTimeout(() => this.classList.remove('active'), 200);
}

后来换成click事件反而快了？但这样PC端鼠标用户会不会也受影响？还有看到别人用fastclick库，但项目里用Vue3能不能直接集成？求大神指点具体解决办法…

300ms延迟

我来解答赞 6 收藏

反馈

2 条解答

a'ゞ玉研 Lv1

移动端触摸延迟是因为浏览器等待确认是否是双击缩放操作。你可以直接使用Vue的@touchstart或者@touchend触发即时反馈，不需要等300ms。

如果想兼容PC端和移动端，可以同时监听@click和@touchend，代码如下：

<element @touchend="handleTouch" @click="handleTouch"></element>

如果想彻底解决，推荐使用fastclick，Vue3也能直接引入使用，不会有任何问题。

2026-02-04 22:06

技术娇娇 Lv1

移动端的300ms延迟是因为浏览器默认等待可能的双击缩放，解决方法有两种：

1. 直接用 touchend 事件，但要确保没有其他逻辑导致延迟。你的代码没问题，可能是其他地方有阻塞。
2. 推荐用 fastclick，Vue3项目里直接安装并初始化就可以。应该能用：

import FastClick from 'fastclick';

onMounted(() => {

  FastClick.attach(document.body);

});

click 本身不会更快，除非用了类似 fastclick 的库处理。PC端鼠标用户不会受影响，fastclick会自动判断设备类型。

2026-02-02 14:00