最近在项目中遇到一个很"诡异"的问题：点击 t-checkbox 组件时，父元素的点击事件居然被触发了！明明只改了复选框状态，怎么父容器也"跟着动"了？今天就跟大家聊聊这个看似简单却暗藏玄机的事件冒泡问题。
一、问题复现：一个"不听话"的复选框
先看这段代码：
html
<!-- 父容器 -->
<div @click="handleParentClick" style="padding: 20px; background: #f0f0f0">
<h3>点击复选框，我会变色</h3>
<t-checkbox @change="handleChildChange">
选项1
</t-checkbox>
</div>预期 ：只有复选框状态改变
实际：复选框状态改变的同时，父容器的点击事件也触发了！
更诡异的是，我明明只在父元素上监听了 @click，没有监听 @change，为什么还会被触发？
二、事件冒泡机制：真相只有一个
要理解这个问题，必须先搞清楚 两个核心概念：
1. DOM 原生事件 vs Vue 组件事件
javascript
// 原生事件（会冒泡）
click, mouseenter, keydown, ...
// Vue 组件自定义事件（默认不会冒泡）
@change, @input, @select, ...关键区别：
-
click是浏览器原生事件，会像水泡一样从子元素向父元素"冒"上去 -
@change是t-checkbox组件自定义触发的事件，Vue 默认不会让它冒泡
2. 一个点击，两个事件
当你点击 t-checkbox 时，实际上触发了两套独立的事件系统：
用户点击
↓
┌─── DOM 层 ───┐
│ click 事件 │ → 会冒泡到父元素的 @click
└──────────────┘
↓
┌── Vue 组件层 ─┐
│ change 事件 │ → 不会冒泡，只在组件内有效
└───────────────┘所以问题根源是 ：click 事件冒泡到了父元素，而不是 change 事件！
三、解决方案：三板斧搞定冒泡
方案一：精准打击（推荐）
html
<t-checkbox
@change="handleChildChange"
@click.stop <!-- 只阻止 click 冒泡 -->
>
选项1
</t-checkbox>原理 ：.stop 修饰符是"对事不对人"，它只阻止同名事件 的冒泡。@click.stop 只影响 click 事件，不影响 change 事件。
方案二：手动拦截
html
<t-checkbox
@change="handleChildChange"
@click="handleClick"
>
选项1
</t-checkbox>
<script setup>
const handleClick = (e) => {
// 根据条件灵活决定是否阻止
if (e.target.tagName === 'INPUT') {
e.stopPropagation()
}
}
</script>方案三：父元素自我防御
html
<!-- 父元素只响应自身点击 -->
<div @click.self="handleParentClick">
<t-checkbox>...</t-checkbox>
</div>.self 修饰符 ：只有当事件目标是当前元素本身时才触发，从子元素冒上来的不触发。
四、常见误区：你以为的阻止冒泡
误区 1：@change.stop 能解决问题？
html
<!-- 无效代码 -->
<t-checkbox @change.stop="handleChange">
</t-checkbox>错因分析：
-
change是组件事件，本就不会冒泡 -
.stop修饰符加在这里毫无意义 -
纯属"用错药"，问题根本没解决
误区 2：阻止了 click 就阻止了 change？
html
<t-checkbox
@click.stop
<!-- change 事件依然正常执行 -->
>
</t-checkbox>正确理解：
-
click和change是两个平行事件 -
阻止
click冒泡 不会影响change的执行 -
就像你堵住了门，不影响窗户通风
误区 3：所有组件库都一样？
不同组件库实现不同：
-
Element Plus ：
el-checkbox也推荐@click.stop -
Ant Design Vue ：
@click.native.stop -
TDesign Vue Next ：
@click.stop即可
经验法则 ：组件库封装的表单组件，通常需要阻止原生事件而非组件事件。
五、原理验证：写个实验代码
html
<template>
<div
@click="log('父 click')"
@change="log('父 change')"
style="padding: 30px; border: 2px solid #1890ff"
>
<h3>父容器（观察控制台的输出）</h3>
<t-checkbox
v-model="checked"
@click="log('子 click')"
@change="log('子 change')"
@click.stop <!-- 移除这行试试 -->
>
点击我测试冒泡
</t-checkbox>
</div>
</template>
<script setup>
import { ref } from 'vue'
const checked = ref(false)
const log = (msg) => {
console.log(`[${new Date().toLocaleTimeString()}] ${msg}`)
}
</script>实验结果：
-
不加
@click.stop：控制台打印"子 click" → "父 click" -
加上
@click.stop：只打印"子 click"
而无论加不加 .stop，change 事件都只打印"子 change"，从不会打印"父 change"。
六、扩展应用：举一反三
这个原理适用于所有组件库：
| 组件库 | 组件 | 阻止冒泡方案 |
|---|---|---|
| Element Plus | el-checkbox |
@click.stop |
| Element Plus | el-radio |
@click.stop |
| Ant Design Vue | a-checkbox |
@click.native.stop |
| TDesign Vue Next | t-checkbox |
@click.stop |
| TDesign Vue Next | t-switch |
@click.stop |
通用法则 ：如果点击组件触发了父级事件，99% 是 click 事件冒泡问题，用 @click.stop 解决。
七、总结：记住这三句话
-
click冒泡，change不冒泡 ------ 这是 DOM 原生事件和 Vue 组件事件的本质区别 -
.stop对事不对人 ------ 只阻止同名事件的冒泡 -
遇到冒泡问题，先找
click------ 90% 的"冒泡错觉"都是 click 事件惹的祸
下次再遇到类似问题，别再盲目地 .stop 所有事件了，找到真正冒泡的那个事件，精准打击才能事半功倍！
最后的 Tips ：如果你用了 @click.stop 还是不行，试试 @click.native.stop，这能确保阻止的是最底层的原生点击事件。不过对 TDesign 来说，通常 @click.stop 就够了。