事件冲突应通过精准响应而非粗暴阻止解决：合理使用stoppropagation、事件委托+容器检测、focusout替代blur、css类控制显隐。
事件冒泡本身不是问题，冲突源于判断逻辑不清晰或阻止方式过于粗暴。原生开发中避免事件冲突，关键在于“精准响应”而非“一堵了之”。
用 event.stopPropagation() 精准拦截，不滥用
只在明确需要隔离行为的子元素上使用，比如下拉菜单里的按钮点击不应激活父卡片，模态框内的表单提交不应触发遮罩关闭。
- 在子元素事件处理器中调用 e.stopPropagation()，确保它不影响父级逻辑
- 避免在所有子节点上无差别加 stopPropagation，否则会破坏事件委托、统计埋点或无障碍支持
- 慎用 e.stopImmediatePropagation()——它会跳过同一元素上的其他监听器，可能影响权限校验或日志上报
优先用事件委托 + 容器检测统一收口
对全局点击关闭类交互（如下拉菜单、模态框），不要依赖每个子项手动阻止，而是由外层统一判断点击位置。
- 监听 document 的 click 事件
- 遍历所有活跃容器（如带
.dropdown-open或.modal-showing类的元素） - 用 element.contains(e.target) 判断点击是否落在该容器内部
- 只有当点击位置不在任何活跃容器内时，才执行收起操作
区分 blur 和 click 的时序问题
输入框 + 下拉菜单组合中，blur 常在 click 前触发，导致菜单提前关闭。
- 改用 focusout 替代 blur（它可冒泡，且能通过
e.relatedTarget判断焦点去向） - 或在 blur 处理中加简单防抖：检查
e.relatedTarget是否属于下拉区域 - 也可延迟关闭逻辑（
setTimeout(() => { ... }, 0)），让 click 先完成
状态交给 CSS 类，解耦 DOM 操作与事件流
避免直接写 el.style.display = 'none' 或 el.remove()，统一用语义化 class 控制显隐。
- 添加/移除 .open、.is-active 等类名
- 样式层负责过渡、定位和可见性（如
.open { opacity: 1; visibility: visible; }） - 这样事件处理只管状态切换，视觉反馈由 CSS 自动响应，逻辑更干净
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
