.stop 用于阻止事件冒泡，.prevent 用于取消默认行为；二者可连用如@click.stop.prevent，顺序不限但推荐先 prevent 后 stop，适用于弹窗、表单提交等场景。

在 Vue.js 模板中，.stop 和 .prevent 是事件修饰符，用于控制原生 DOM 事件的行为，尤其针对事件冒泡和默认行为这两个常见问题。

什么是事件冒泡？为什么需要 .stop

当子元素触发事件（如点击），该事件会逐层向上传播到父元素，这就是冒泡机制。比如一个按钮在卡片内，点击按钮可能同时触发按钮和卡片的 click 处理函数，造成意外逻辑执行。

.stop 的作用是调用 event.stopPropagation()，阻止事件继续向上冒泡。

• 写法：@click.stop="handleClick"
• 适用场景：弹出菜单、下拉框、模态框遮罩层等需要精确响应区域的交互
• 注意：它只影响当前绑定事件的冒泡，不影响同一元素上其他事件监听器的执行

什么是默认行为？为什么需要 .prevent

某些 HTML 元素有浏览器内置的默认动作，例如：<a href="#"></a> 点击会跳转到页面顶部，<form></form> 提交会刷新页面。这些默认行为在 Vue 表单或链接交互中往往不需要。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

.prevent 对应 event.preventDefault()，用于取消这些默认动作。

• 写法：@submit.prevent="onSubmit" 或 @click.prevent
• 常用组合：@submit.prevent 是表单提交最简写法，避免页面刷新
• 注意：它不阻止冒泡，仅阻止默认行为；如需两者兼顾，可连用：@click.stop.prevent

.stop 与 .prevent 可以一起用吗？

可以，且很常见。修饰符的顺序不影响功能，Vue 内部会依次调用 preventDefault 和 stopPropagation。

• 推荐写法：@click.stop.prevent 或 @click.prevent.stop（语义上先 prevent 再 stop 更直观）
• 典型用例：自定义链接（<a></a>），既不跳转也不触发父容器点击
• 链式修饰符是 Vue 的语法糖，比在方法里手动调用 event.preventDefault() 更简洁、更声明式

和其他修饰符配合使用的提示

Vue 还提供如 .capture、.self、.once 等修饰符，它们可与 .stop 和 .prevent 组合使用。

• @click.capture.prevent：在捕获阶段就阻止默认行为
• @click.self.stop：仅当点击元素本身（非子元素）时才停止冒泡
• 多个修饰符之间用点连接，无空格，顺序自由但建议按逻辑分组（如行为类 .prevent 放前，传播类 .stop 放后）