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

本文介绍一种不依赖 css `pointer-Events`、也不滥用 `preventdefault` 的 vue 原生方案，通过状态控制 + 动态事件绑定，安全实现链接点击节流（每 1500ms 最多响应一次）。

在 vue 开发中，常需限制用户对按钮或链接的高频点击（如防止重复提交、避免路由快速跳转冲突）。但直接在 @click 中使用 setTimeout(() => e.preventDefault(), 1500) 是无效的——因为 e.preventDefault() 必须在事件同步执行阶段调用，延迟后调用已失去意义，且无法撤回已发生的导航行为。

✅ 正确思路是：提前拦截，而非事后阻止。即在点击瞬间判断是否允许触发，仅当未被“阻塞”时才启用 click 事件。

✅ 推荐实现方式（Vue 2 / Vue 3 Options API）

   {{ item.name }} 

? 注意：:event 是 的 prop（Vue router 3/4 均支持），用于显式指定响应的事件类型。传入空数组 [] 表示禁用所有原生事件（包括 click），从而彻底避免触发。

对应逻辑：

export default {   data() {     return {       isBlocked: false     }   },   methods: {     // 在 router-link 的 to 目标跳转前调用（推荐配合 @click.native 或自定义封装）     // 更稳妥的做法：改用普通 `` + 手动编程式导航     handleLinkClick() {       if (this.isBlocked) return;        this.isBlocked = true;       // 立即触发导航（或执行其他业务逻辑）       this.$router.push(this.item.path).catch(() => {}); // 避免导航守卫中断报错        // 1500ms 后恢复可点击状态       setTimeout(() => {         this.isBlocked = false;       }, 1500);     }   } }

若需保持 语义化，同时完全可控，建议改用 标签 + 编程式导航，并封装防抖逻辑：

立即学习“前端免费学习笔记（深入）”；

   {{ item.name }} 

methods: {   handleLinkClick() {     if (this.isBlocked) return;      this.isBlocked = true;      // 执行导航（支持 Vue Router 3/4）     this.$router.push(this.item.path).catch(err => {       console.warn('Navigation cancelled or failed:', err);     });      // 重置状态（注意：此处 setTimeout 不影响导航，仅控制 UI 可交互性）     setTimeout(() => {       this.isBlocked = false;     }, 1500);   } }

⚠️ 注意事项

• ❌ 避免在 @click 回调中异步调用 e.preventDefault() —— 它不会生效；
• ✅ 使用 @click.prevent 可确保默认行为被立即阻止，再由 js 主动控制后续逻辑；
• ? 若需全局节流（如多个链接共用同一冷却期），可将 isBlocked 提升为计算属性或 Pinia store 状态；
• ? Vue 3 Composition API 用户可使用 ref 和 setTimeout 封装为自定义 Hook，例如 useThrottledClick(duration = 1500)。

通过状态驱动 + 主动控制事件绑定或导航时机，你既能保障用户体验（视觉反馈可配合 :class=”{ disabled: isBlocked }”），又能确保逻辑健壮、无竞态风险。