Vue1500ms节流防重复点击设置

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《Vue 防重复点击设置 1500ms 节流方法》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

本文介绍一种不依赖 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 均适用）

<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