事件冒泡踩坑记：一个TDesign Checkbox引发的思考

最近在项目中遇到一个很"诡异"的问题：点击 t-checkbox 组件时，父元素的点击事件居然被触发了！明明只改了复选框状态，怎么父容器也"跟着动"了？今天就跟大家聊聊这个看似简单却暗藏玄机的事件冒泡问题。

一、问题复现：一个"不听话"的复选框

先看这段代码：

<!-- 父容器 -->
<div @click="handleParentClick" style="padding: 20px; background: #f0f0f0">
  <h3>点击复选框，我会变色</h3>
  
  <t-checkbox @change="handleChildChange">
    选项1
  </t-checkbox>
</div>

预期 ：只有复选框状态改变
实际：复选框状态改变的同时，父容器的点击事件也触发了！

更诡异的是，我明明只在父元素上监听了 @click，没有监听 @change，为什么还会被触发？

二、事件冒泡机制：真相只有一个

要理解这个问题，必须先搞清楚 两个核心概念：

1. DOM 原生事件 vs Vue 组件事件

// 原生事件（会冒泡）
click, mouseenter, keydown, ...

// Vue 组件自定义事件（默认不会冒泡）
@change, @input, @select, ...

关键区别：

• click 是浏览器原生事件，会像水泡一样从子元素向父元素"冒"上去

• @change 是 t-checkbox 组件自定义触发的事件，Vue 默认不会让它冒泡

2. 一个点击，两个事件

当你点击 t-checkbox 时，实际上触发了两套独立的事件系统：

用户点击
   ↓
┌─── DOM 层 ───┐
│ click 事件   │  → 会冒泡到父元素的 @click
└──────────────┘
   ↓
┌── Vue 组件层 ─┐
│ change 事件    │  → 不会冒泡，只在组件内有效
└───────────────┘

所以问题根源是 ：click 事件冒泡到了父元素，而不是 change 事件！

三、解决方案：三板斧搞定冒泡

方案一：精准打击（推荐）

<t-checkbox 
  @change="handleChildChange"
  @click.stop  <!-- 只阻止 click 冒泡 -->
>
  选项1
</t-checkbox>

原理 ：.stop 修饰符是"对事不对人"，它只阻止同名事件 的冒泡。@click.stop 只影响 click 事件，不影响 change 事件。

方案二：手动拦截

<t-checkbox 
  @change="handleChildChange"
  @click="handleClick"
>
  选项1
</t-checkbox>

<script setup>
const handleClick = (e) => {
  // 根据条件灵活决定是否阻止
  if (e.target.tagName === 'INPUT') {
    e.stopPropagation()
  }
}
</script>

方案三：父元素自我防御

<!-- 父元素只响应自身点击 -->
<div @click.self="handleParentClick">
  <t-checkbox>...</t-checkbox>
</div>

.self 修饰符 ：只有当事件目标是当前元素本身时才触发，从子元素冒上来的不触发。

四、常见误区：你以为的阻止冒泡

误区 1：@change.stop 能解决问题？

<!-- 无效代码 -->
<t-checkbox @change.stop="handleChange">
</t-checkbox>

错因分析：

• change 是组件事件，本就不会冒泡

• .stop 修饰符加在这里毫无意义

• 纯属"用错药"，问题根本没解决

误区 2：阻止了 click 就阻止了 change？

<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 即可

经验法则 ：组件库封装的表单组件，通常需要阻止原生事件而非组件事件。

五、原理验证：写个实验代码

<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 解决。

七、总结：记住这三句话

1. click 冒泡，change 不冒泡 ------ 这是 DOM 原生事件和 Vue 组件事件的本质区别

2. .stop 对事不对人 ------ 只阻止同名事件的冒泡

3. 遇到冒泡问题，先找 click ------ 90% 的"冒泡错觉"都是 click 事件惹的祸

下次再遇到类似问题，别再盲目地 .stop 所有事件了，找到真正冒泡的那个事件，精准打击才能事半功倍！

最后的 Tips ：如果你用了 @click.stop 还是不行，试试 @click.native.stop，这能确保阻止的是最底层的原生点击事件。不过对 TDesign 来说，通常 @click.stop 就够了。