核心是防止事件冒泡导致兄弟组件误触发点击逻辑：通过对比event.target与currentTarget判断是否为直接点击，用stopPropagation阻断子元素冒泡，优先采用事件委托并精准匹配selector，同时排查document级监听器干扰。
排查事件冒泡对兄弟组件点击逻辑的干扰，核心是确认点击事件是否意外从子元素“冒”到了父容器，再被其他兄弟组件监听到——尤其当多个组件共享同一父级容器、又各自绑定 click 时，很容易误触发。
检查事件目标与当前目标是否一致
在点击处理函数中打印 event.target 和 event.currentTarget：
-
event.target是真正被点击的 DOM 元素（可能是子元素，比如按钮里的 icon） -
event.currentTarget是当前绑定事件的 DOM 元素（通常是组件根节点） - 若两者不一致，说明事件是从内部元素冒泡上来的，可能不是用户本意点击该组件
建议加一层保护：
function handleClick(e) {
if (e.target !== e.currentTarget) return; // 只响应直接点击根容器
// 后续业务逻辑
}
用 stopPropagation 阻断非必要冒泡
如果某个子元素（如关闭按钮、图标、开关）的点击不应影响兄弟组件，就在它的事件处理器中调用 e.stopPropagation()：
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
- 注意不要滥用：只在明确不需要父级响应时才加
- 避免在根容器上全局阻止，否则可能破坏下拉菜单、弹层等依赖冒泡的交互
- React 中可直接写：
onClick={(e) => { e.stopPropagation(); handleClose(); }}
优先使用事件委托 + 精准判断 selector
如果多个兄弟组件结构相似（如一组卡片），不如把事件监听提到公共父级，用 event.target.matches('.card__delete') 等判断具体点击区域：
- 减少重复绑定，也天然规避了兄弟间互相干扰
- 能清晰看到“谁点的什么”，逻辑集中，调试方便
- 例如：
parent.addEventListener('click', e => { if (e.target.classList.contains('btn--confirm')) { ... } })
检查是否意外绑定了 document 或 body 级别监听器
有些全局逻辑（如点击空白处关闭弹窗）会监听 document，而它位于事件流最顶层——任何冒泡上来的点击都会触发：
- 用浏览器开发者工具 → Elements → Event Listeners 面板，展开 document，查看是否有 click 监听器
- 临时禁用或加条件过滤（如
if (!e.target.closest('.modal')) closeModal()） - 确保这些监听器在组件卸载时被正确移除，防止内存泄漏和跨组件误触发
