Vue.js中@click.prevent的常见应用场景包括：阻止表单提交刷新页面、避免链接默认跳转、自定义右键菜单、防止文件拖拽默认行为等。
它通过调用event.preventDefault()来拦截元素的默认操作，适用于需要完全控制交互逻辑的情况。
典型用例有表单按钮、复选框、锚点链接等。
对于非交互元素或已处理默认行为的情况则无需使用。
开发者可根据需求选择单独使用或与其他修饰符组合（如.prevent.stop）。
在Vue.js开发中，@click.prevent 是 v-on:click.prevent 的简写，它会自动调用 event.preventDefault()。
需要用到 @click.prevent 的典型场景总结：
| 场景分类 | 具体场景 | 原因（为什么要阻止默认行为） | 示例代码片段 |
|---|---|---|---|
| 1. 表单相关 | <button type="submit"> 在 <form> 内 |
防止触发表单提交导致页面刷新 | <form @submit.prevent>...<button @click.prevent>提交</button> |
<input type="checkbox"> 或 <radio> 同时监听点击 |
避免默认选中/取消选中行为干扰自定义逻辑 | <input type="checkbox" @click.prevent="handleClick"> |
|
表单重置按钮 <button type="reset"> |
防止重置所有表单字段 | <button type="reset" @click.prevent="customReset"> |
|
| 2. 链接标签 | <a href="..."> 作为 JS 交互按钮 |
避免页面跳转、滚动到顶部或 # 锚点行为 | <a href="#" @click.prevent="doSomething">操作</a> |
带有 href="javascript:void(0)" 的链接 |
更语义化，避免控制台警告或不必要的伪协议 | <a href="/page" @click.prevent="navigate"> |
|
| 3. 右键菜单 | 自定义右键菜单 | 阻止弹出浏览器默认右键菜单 | <div @contextmenu.prevent="openCustomMenu"> |
| 4. 拖拽与文件上传 | 拖拽区域（drag & drop） | 阻止浏览器默认打开文件/图片行为 | @dragover.prevent @drop.prevent |
| 自定义文件上传按钮 | 防止点击 <input type="file"> 时触发系统文件选择两次 |
<button @click.prevent="triggerFileInput"> |
|
| 5. 键盘事件 | 监听回车键在输入框中 | 阻止表单提交（若在 form 内）或默认提交行为 | <input @keyup.enter.prevent="search"> |
| 6. 移动端手势 | 触摸事件与点击混用 | 防止触发滚动、缩放或点击穿透 | @touchmove.prevent @click.prevent |
| 7. 事件委托/全局拦截 | 顶层容器拦截点击 | 阻止某些区域内的默认操作，例如拦截所有链接跳转 | <div @click.prevent="globalHandler"> |
| 8. 重复提交防护 | 按钮在提交后仍被快速点击 | 结合 .prevent 阻止多次提交，但更常用 disabled |
<button @click.prevent="submitForm"> |
| 9. 自定义开关/复选框 | 模拟 switch、checkbox | 完全由 JS 控制选中状态，避免默认勾选闪烁 | <div @click.prevent="toggle">伪复选框</div> |
| 10. 避免滚动锚定 | 点击 # 或空链接 |
防止页面滚动到顶部 | <a href="#" @click.prevent="..."> |
✅ 何时不需要 .prevent？
| 无需使用的情况 | 理由 |
|---|---|
原生 <div>, <span>, <p> 等非交互元素 |
默认没有需要阻止的浏览器行为 |
已经使用 type="button" 的 <button> |
默认不会提交表单 |
纯路由跳转（如 <router-link>） |
Vue Router 已阻止默认跳转并接管 |
| 仅触发自定义事件，无默认行为干扰 | 添加 .prevent 无副作用但冗余 |
💡 替代方案
-
原生 JS：
event.preventDefault() -
Vue 链式修饰符：
@click.prevent.stop（同时阻止冒泡） -
表单全局阻止：
<form @submit.prevent>