父子元素重叠时点击子元素触发父事件，本质是事件冒泡干扰；需先通过console.log对比event.target与event.currentTarget确认是否真由冒泡引起，再排查pointer-events、事件绑定冲突及DOM层级，最后按业务需求选择stopPropagation()、target判断或捕获阶段拦截。
父子元素重叠时，点击子元素却触发了父元素的事件，这是典型的冒泡干扰。关键不是“阻止冒泡”，而是先精准定位谁在冒、怎么冒、为什么不该冒。
确认是否真由冒泡引起
别急着加 stopPropagation()。先打开浏览器开发者工具，在父、子元素上分别打上断点，或用以下方式临时标记：
- 给父元素事件处理函数开头加
console.log('父被触发', event.target, event.currentTarget) - 给子元素事件处理函数开头加
console.log('子被触发', event.target, event.currentTarget)
重点看 event.target（实际点击的元素）和 event.currentTarget（当前绑定事件的元素）是否不同。如果子元素点击后，父的回调里 event.target 是子元素，而 event.currentTarget 是父元素，那基本就是冒泡所致。
检查重叠区域是否真的存在事件捕获/监听冲突
重叠不等于一定冒泡——前提是子元素没阻止、父元素没禁用 pointer-events、且 DOM 层级确实支持冒泡路径。
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 用 Elements 面板选中子元素，看右侧 Event Listeners 标签页，确认它是否绑定了同类型事件（如都绑了
click） - 检查子元素 CSS 是否有
pointer-events: none（这会让点击穿透到父层，看起来像冒泡，实为捕获阶段就交给了父） - 检查父元素是否设置了
pointer-events: none或visibility: hidden—— 这些会让子元素成为实际目标，但视觉上像“父也被点了”
区分“该冒”和“不该冒”的业务逻辑
有些场景冒泡是合理的：比如卡片内按钮点击，同时希望卡片高亮。问题在于“意外触发”。这时要按需干预：
- 如果子元素必须响应、父元素绝对不能响应 → 在子事件里调用
event.stopPropagation() - 如果父元素只应在直接点击自身时响应 → 把父的事件监听从
click改为判断event.target === event.currentTarget - 如果子元素是图标/开关等装饰性控件，且与父功能语义无关 → 加
event.stopImmediatePropagation()并确保它在事件队列最前执行
用 capture 阶段做前置拦截（进阶排查）
在父元素上用捕获模式监听，能最早发现事件路径：
parent.addEventListener('click', e => {
console.log('捕获阶段：', e.target, '→', e.currentTarget);
}, true); // 第三个参数设为 true
配合子元素的冒泡监听，就能画出完整事件流：从 document → body → 父（捕获）→ 子（捕获）→ 子（冒泡）→ 父（冒泡）。哪一环多出了预期外的触发，就说明那里逻辑有歧义。
