如何在 Vue 中实现链接点击节流（1500ms 防重复点击）

本文介绍一种不依赖 css `pointer-Events`、也不滥用 `preventdefault` 的 vue 原生方案，通过动态控制 `@click` 事件绑定与状态标记，安全实现链接的 1500ms 点击节流。

在 vue 开发中，常需限制用户对某个链接（如 ）的频繁点击，例如防止重复提交、避免快速跳转导致路由异常等。直接在 @click 中调用 e.preventDefault() 并配合 setTimeout（如 setTimeout(() => e.preventDefault(), 1500)）是无效的——因为 preventDefault() 必须在事件处理同步阶段立即执行，延迟调用已失去作用，且无法撤销已触发的导航行为。

✅ 正确思路是：从源头控制事件是否应被响应，而非事后阻止。推荐采用「状态驱动 + 条件事件绑定」策略：

✅ 推荐实现（Vue 3 Composition API / Vue 2 Options API 均适用）

? 关键点说明：@click=”handleClick” 始终绑定，但逻辑内通过 isBlocked 判断是否放行；e.preventDefault() 在条件成立时同步执行，确保 不触发默认跳转；isBlocked 是响应式状态，配合 :class 可直观反馈禁用态（提升 ux）；无需操作 dom 或 hack 事件对象，符合 Vue 响应式设计哲学。

⚠️ 注意事项

• ❌ 避免使用 :event=”!isBlocked ? ‘click’ : ”” 这种写法（原答案中提及）：Vue 不支持动态 event 绑定，该语法无效，会导致事件完全丢失或报错；
• ✅ 若使用 Vue 3
• ? 如需更通用的节流封装，可抽离为自定义 Hook（如 useThrottleClick），复用到按钮、表单等其他交互元素。

✅ 总结

真正的防重复点击不是“阻止已发生的动作”，而是“让动作在不可用时不被触发”。通过响应式状态 + 同步条件判断 + 清晰的视觉反馈，即可在不牺牲可维护性与可访问性的前提下，稳健实现 1500ms 节流需求。