本文介绍一种不依赖 css `pointer-events`、也不滥用 `preventdefault` 的 vue 原生方案，通过动态控制 `@click` 事件绑定与状态标记，安全实现链接的 1500ms 点击节流。
在 Vue 开发中，常需限制用户对某个链接（如
✅ 正确思路是：从源头控制事件是否应被响应，而非事后阻止。推荐采用「状态驱动 + 条件事件绑定」策略：
✅ 推荐实现（Vue 3 Composition API / Vue 2 Options API 均适用）
{{ item.name }}
? 关键点说明：@click="handleClick" 始终绑定，但逻辑内通过 isBlocked 判断是否放行；e.preventDefault() 在条件成立时同步执行，确保 不触发默认跳转；isBlocked 是响应式状态，配合 :class 可直观反馈禁用态（提升 UX）；无需操作 DOM 或 hack 事件对象，符合 Vue 响应式设计哲学。
⚠️ 注意事项
- ❌ 避免使用 :event="!isBlocked ? 'click' : ''" 这种写法（原答案中提及）：Vue 不支持动态 event 绑定，该语法无效，会导致事件完全丢失或报错；
- ✅ 若使用 Vue 3
- ? 如需更通用的节流封装，可抽离为自定义 Hook（如 useThrottleClick），复用到按钮、表单等其他交互元素。
✅ 总结
真正的防重复点击不是“阻止已发生的动作”，而是“让动作在不可用时不被触发”。通过响应式状态 + 同步条件判断 + 清晰的视觉反馈，即可在不牺牲可维护性与可访问性的前提下，稳健实现 1500ms 节流需求。
