前端开发：点击事件使用 @click.prevent 的场景总结
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>