Vue Academy · 课时

v-on 事件修饰符

.stop、.prevent、.self、.once、.capture、.passive——了解每个修饰符的使用时机和原因。

v-on 事件修饰符 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

更简洁的事件处理

v-on 指令（简写为 @）用于添加事件监听器。事件修饰符是用于处理常见 DOM 工作的后缀，例如阻止事件传播或阻止默认行为，从而让处理函数专注于逻辑。

修饰符解决的问题

没有修饰符时，您需要在处理函数中反复编写 DOM 样板代码：调用 event.preventDefault() 或 event.stopPropagation()。修饰符会以声明式方式将这些操作移入模板。

.stop 用于 stopPropagation

.stop 会阻止事件冒泡到父元素，相当于调用 event.stopPropagation()。

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent 用于 preventDefault

.prevent 会调用 event.preventDefault()。典型用途是在提交表单时阻止页面重新加载。

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

组合修饰符

您可以组合使用多个修饰符。顺序很重要，它们会从左到右依次应用。

<a @click.stop.prevent="onClick">Link</a>

.self：仅限元素自身

.self 仅在事件目标就是该元素本身时触发处理函数，而不会响应从子元素冒泡上来的事件。它非常适合用于覆盖层背景。

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

按键修饰符

对于键盘事件，您可以监听特定按键。@keyup.enter 仅在 Enter 键松开时触发。

<input @keyup.enter="search" />

.once：处理函数仅触发一次

.once 最多运行处理函数一次，随后移除监听器。它适用于欢迎提示关闭等一次性操作。

<button @click.once="initialize">Start</button>

.passive 提升滚动性能

.passive 会告知浏览器处理函数不会调用 preventDefault()。这样浏览器无需等待即可流畅滚动，从而提升触摸和滚动事件的性能。

<div @scroll.passive="onScroll">...</div>

选择合适的修饰符

.stop — 阻止冒泡。
.prevent — 阻止默认行为。
.self — 忽略从子元素冒泡上来的事件。
.once — 只运行一次。
.passive — 永不阻止默认行为；更有利于滚动性能。

注意：请勿将 .passive 与 .prevent 组合使用，它们相互矛盾。

快速检查

请选择正确的修饰符。

回顾

事件修饰符可以让处理函数保持简洁：

.stop = stopPropagation，.prevent = preventDefault。
.self 仅在元素自身触发。
.enter 等按键修饰符可以指定特定按键。
.once 只运行处理函数一次；.passive 可以提升滚动性能。

常见问题解答