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

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

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

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

Keeva AI

AI一键生成数字人营销视频

下载

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

<template>
  <router-link 
    :to="item.path" 
    @click="handleClick"
    :class="{ 'disabled': isBlocked }"
  >
    {{ item.name }}
  </router-link>
</template>

<script>
export default {
  data() {
    return {
      isBlocked: false
    }
  },
  methods: {
    handleClick(e) {
      if (this.isBlocked) {
        e.preventDefault() // 主动拦截，避免意外跳转
        return
      }

      // 立即锁定状态
      this.isBlocked = true

      // 1500ms 后恢复可点击
      setTimeout(() => {
        this.isBlocked = false
      }, 1500)
    }
  }
}
</script>

<style scoped>
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
</style>

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

⚠️ 注意事项

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

✅ 总结

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