本文介绍一种不依赖 css `pointer-events`、也不滥用 `preventdefault` 的 vue 原生方案，通过动态控制 `@click` 事件绑定与状态标记，安全实现链接的 1500ms 点击节流。
在 Vue 开发中，常需限制用户对某个链接（如 <router-link>）的频繁点击，例如防止重复提交、避免快速跳转导致路由异常等。直接在 @click 中调用 e.preventDefault() 并配合 setTimeout（如 setTimeout(() => e.preventDefault(), 1500)）是无效的——因为 preventDefault() 必须在事件处理同步阶段立即执行，延迟调用已失去作用，且无法撤销已触发的导航行为。
✅ 正确思路是：从源头控制事件是否应被响应，而非事后阻止。推荐采用「状态驱动 + 条件事件绑定」策略：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
✅ 推荐实现（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() 在条件成立时同步执行，确保 <router-link> 不触发默认跳转；isBlocked 是响应式状态，配合 :class 可直观反馈禁用态（提升 UX）；无需操作 DOM 或 hack 事件对象，符合 Vue 响应式设计哲学。
⚠️ 注意事项
- ❌ 避免使用 :event="!isBlocked ? 'click' : ''" 这种写法（原答案中提及）：Vue 不支持动态 event 绑定，该语法无效，会导致事件完全丢失或报错；
- ✅ 若使用 Vue 3 <script setup>，可用 ref 替代 data，逻辑一致；
- ? 如需更通用的节流封装，可抽离为自定义 Hook（如 useThrottleClick），复用到按钮、表单等其他交互元素。
✅ 总结
真正的防重复点击不是“阻止已发生的动作”，而是“让动作在不可用时不被触发”。通过响应式状态 + 同步条件判断 + 清晰的视觉反馈，即可在不牺牲可维护性与可访问性的前提下，稳健实现 1500ms 节流需求。
