FastClick 引入后点击事件反而变慢了？

开发者鑫平提问于 2026-02-25 16:07:18 阅读 54

交互

我在移动端项目里引入了 FastClick，本来是想解决 300ms 延迟问题，但发现某些按钮点击后响应反而更慢了，甚至有时候要点两次才触发。我用的是 FastClick.attach(document.body)，也没改其他配置。

控制台没报错，但交互体验明显变差。是不是和我用的 Vue 有冲突？或者需要排除某些元素？

手势操作

我来解答赞 13 收藏

反馈

2 条解答

炜曦🍀 Lv1

可能是 FastClick 和 Vue 的事件处理机制冲突了，我之前这样搞的，给需要排除的元素加个 class，然后在初始化 FastClick 时排除这些元素，比如这样：

pre class="pure-highlightjs line-numbers">

FastClick.attach(document.body, {

  exclude: function(element) {

    return element.classList.contains('no-fastclick');

  }

});

2026-03-21 01:02

UP主～雯婷 Lv1

FastClick 引入后反而变慢，基本就是被它自己搞的“防重复点击”和“模拟点击”机制坑了，尤其配合 Vue 这类框架时容易出问题。

你先检查几个关键点：

第一个，FastClick 默认会阻止默认行为再手动触发 click，但 Vue 的 v-on:click 或 @click 本身可能已经做了防抖或节流，双重处理就慢了。
第二个，FastClick 对 <button>、<input> 这类原生可点击元素会额外加一层判断，有时候反而拖慢响应。

最简单的解决办法是：
1. 别挂到 document.body 上，改挂具体容器，比如你整个页面有个 <div id="app">，就只 attach 到它上面
2. 给那些高频点击、或者你自己已经做了点击优化的元素加上 needsclick 类名，FastClick 就会跳过这些元素，不加处理

比如这样：

<button class="needsclick" @click="submit">提交</button>

或者 JS 里动态加：

element.classList.add('needsclick')

如果项目里用的是 Vue 2，还可以考虑直接用 fastclick 的 attach 配合 click 事件手动绑定，别让它自动接管所有 click。

拿去改改，一般这样就能恢复正常响应速度。要是还慢，你用 performance 面板看下点击事件链里是不是有 FastClick 的 onClick 卡在中间。

2026-02-25 16:10