多层嵌套点击事件冲突源于事件冒泡，解决方法有三：一是用stopPropagation()截断冒泡；二是用event.target精准判断执行逻辑；三是区分stopPropagation与stopImmediatePropagation的适用场景。
多层嵌套点击事件冲突，本质是事件冒泡机制在起作用：子元素触发点击后，事件自动向父、祖父直至 document 逐层传递。如果各级都绑了 click 监听器，就会连带触发，造成逻辑错乱——比如点按钮却关闭了整个弹窗，或点菜单项却收起了下拉容器。
明确用 stopPropagation() 截断冒泡路径
这是最常用、最直接的解法。只要在子元素的事件处理函数中调用它，就能让事件停在当前层，不再向上走。
- 必须在事件回调参数中拿到
event对象才能调用，例如：element.addEventListener('click', function(e) { e.stopPropagation(); }) - 它只影响冒泡阶段，不影响捕获阶段；也不会阻止默认行为（如表单提交、链接跳转），如需同时阻止，请额外调用
e.preventDefault() - 注意不要滥用：若父层本就依赖委托监听（比如用一个父容器监听所有子按钮），强行阻止会破坏原有设计
用 event.target 做精准条件判断
不阻断冒泡，而是让父级监听器“看人下菜”——只对真正想响应的元素执行逻辑，其余忽略。适合需要统一管理但又需区分来源的场景。
- 在父元素监听器里检查
event.target是否匹配目标（如event.target.matches('.btn-delete')或event.target.id === 'save'） - 也可结合
closest()向上查找最近的符合条件的祖先，判断是否属于某个功能区域 - 这种方式保留了事件流完整性，便于调试和后期扩展，也更符合事件委托的设计思想
区分 stopPropagation 和 stopImmediatePropagation
两者都用于中断传播，但作用范围不同：
立即学习“Java免费学习笔记（深入）”；
-
stopPropagation()：阻止事件继续向上冒泡，但同一元素上其他同类型监听器仍会执行 -
stopImmediatePropagation()：不仅阻止冒泡，还立刻终止当前元素上剩余同类型监听器的执行 - 典型用途：当某插件或第三方脚本也给同一元素绑了 click，而你想确保自己的逻辑优先且独占时，用后者更稳妥
框架中的写法差异要留意
原生 JS 的 event.stopPropagation() 在 Vue、React 等框架中依然有效，但调用方式略有不同：
- Vue 模板中可直接写修饰符：
@click.stop="handleClick"，等价于手动调用stopPropagation - React 中事件对象是
SyntheticEvent，同样支持e.stopPropagation()，但不能用return false替代（它既不阻止冒泡也不阻止默认行为） - 在自定义组件封装中，若子组件内部触发事件并希望透传给父组件，应主动
emit或props.onXXX调用，而不是依赖原生冒泡——这是更可控的通信方式
