Vue 3 中怎么使用 `.self` 修饰符确保只有事件触发源是当前元素时才执行回调-Vue.js-PHP中文网

.self修饰符确保事件仅在绑定元素自身触发时执行，即event.target等于event.currentTarget；用于卡片点击、遮罩层关闭等需区分目标元素的场景。

vue 3 中怎么使用 `.self` 修饰符确保只有事件触发源是当前元素时才执行回调

在 Vue 3 中，`.self` 修饰符用于精准控制事件触发范围：它确保回调函数**仅当事件的原始目标（event.target）就是绑定事件的元素本身**时才执行，而不是它的任意子元素。

.self 的核心逻辑

事件默认会冒泡。比如一个

 里嵌套了 ，点击按钮时，click 事件会先在按钮上触发，再向上冒泡到父 div。若父 div 绑定了 @click="handler"，不加修饰符就会被触发——即使用户点的是里面的按钮。加上 `.self` 后，Vue 会在执行前检查：event.target === event.currentTarget。只有两者相等（即事件没“跑偏”，确实发生在当前元素上），才会调用回调。
典型使用场景


卡片容器点击响应：整个卡片可点击跳转，但内部的「删除」「编辑」按钮要独立操作，不希望点按钮时也触发卡片跳转
  
下拉菜单遮罩层：点击菜单区域外的遮罩层关闭菜单，但点击菜单内容本身不应关闭
  
自定义表单控件：外层包裹 div 做样式容器，只希望直接点击该容器空白处才触发校验或展开逻辑

写法与对比示例
假设结构如下：

											
												
												
													Springboot Vue Builder
													从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
												
												下载
												
											
										



  标题


  

此时：

不加修饰符：@click="handleCardClick" → 点标题、点按钮、点空白处，都会触发 handleCardClick

  加 `.self`：@click.self="handleCardClick" → 只有直接点击  的空白区域（且非子元素）时才触发；点标题或按钮，handleCardClick 不执行
注意事项


.self 和 .stop 功能不同：前者是“过滤触发源”，后者是“截断传播路径”。二者可共存，但目的不重叠
  它不阻止子元素自身的事件，只让父级监听器对子元素触发的事件“视而不见”
  适用于所有原生 DOM 事件（click、mousedown、keyup 等），不仅限于 click
  在组合式 API 中写法一致：@click.self="onClick"，无需额外配置

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！