FastClick 在 Vue 里为啥没消除点击延迟？

西门栾同提问于 2026-03-13 14:38:18 阅读 5

移动

我在移动端用 FastClick 想解决 300ms 点击延迟，但加了之后好像没效果，按钮还是有明显延迟。我是在 main.js 里引入并 attach 到 body 上的，难道是和 Vue 的事件系统冲突了？

这是我的组件代码：

<template>
  <button @click="handleClick">点我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('clicked');
    }
  }
}
</script>

我来解答赞 1 收藏

反馈

1 条解答

Designer°宇轩 Lv1

这问题我之前也踩过坑，说白了就两点：

第一，FastClick 在现代浏览器上基本没必要了。iOS Safari 和 Android Chrome 从 2017 年开始已经自动去掉 300ms 延迟，前提是你把 viewport 配对：

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

只要设了 user-scalable=no 和 width=device-width，延迟就没了，FastClick 可以直接扔掉。

第二，如果非要解决 Vue 的问题。Vue 2.x 的 @click 是自己封裝的事件系统，跟原生 click 事件不是一回事。你需要用原生事件绑定：

<button @click="handleClick" @touchstart="handleClick">点我</button>

或者直接：

<button v-on:click.native="handleClick">点我</button>

我的建议：先检查你的 meta 标签配对了没，十有八九是这块没设置对。如果设置了还有问题，再考虑换个方案，比如直接用 touchstart 事件自己写个防抖，或者用 vue-touch 这种专门适配过 Vue 的库。

FastClick 这玩意儿现在真没必要死磕了，浏览器原生支持比它香多了。

2026-03-13 15:03