防止父级误触需精准控制事件传播：优先用event.target.closest()过滤非目标元素；子元素仅对完全无关操作调用stoppropagation()；shadow dom默认隔离；react中需同时处理合成事件与原生事件。
在复合组件中防止父级误触，核心是精准控制事件传播路径，而不是简单“阻止一切冒泡”。关键在于区分哪些点击该响应、哪些该截断，同时兼顾 Shadow DOM 隔离与 React 合成事件特性。
明确触发源，用 event.target 判断是否该响应父级
父容器（如卡片）的点击逻辑应主动过滤掉内部按钮、链接等交互子元素，避免依赖子元素“阻断”——这样更健壮，也避免漏处理动态插入的元素。
- 监听父级 click 时，检查 event.target 是否为预期区域（比如卡片正文、边框），而非按钮、图标、链接等
- 可结合 class 名或 data 属性做语义化判断：
if (event.target.closest('.card-action-btn')) return; - 这种方式不依赖子元素配合，适合第三方组件或不可控子节点场景
子元素显式调用 stopPropagation()，但仅限真正需要隔离的操作
当子元素行为与父级完全无关（如弹窗按钮、删除图标、表单提交按钮），应在它的事件处理器中调用 stopPropagation()，切断传播链。
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- React 中写法：
onClick={(e) => { e.stopPropagation(); openModal(); }} - 原生 DOM 中同样适用：
button.addEventListener('click', e => { e.stopPropagation(); ... }); - 注意：不要在所有子元素上无差别加 stopPropagation，否则会破坏合理的事件委托或焦点管理
Shadow DOM 场景下，靠 composed: false 主动封住边界
若复合组件使用了 Shadow DOM（如 Web Components 或某些 UI 库封装），默认事件无法穿透到 light DOM。这是天然防护，但需确认自定义事件没意外设 composed: true。
- 原生事件（click、input）天生 composed: false，不会出界，无需额外操作
- 自定义事件若需对外通信，必须显式设
{ bubbles: true, composed: true }；不需要时，保持默认即可 - 敏感模块（如广告、登录弹窗）建议创建 closed mode shadowRoot，并统一 dispatch 时不设 composed
React 中注意合成事件与原生事件的区别
React 的 onClick 是合成事件，stopPropagation 对它有效，但它不影响原生事件监听器。若父级用了 addEventListener 绑定原生 click，而子级用 React 处理，仍可能触发——此时需双保险。
- 子组件内同时调用 e.stopPropagation() 和 e.nativeEvent.stopImmediatePropagation() 可覆盖更彻底
- 避免在同一个元素上混用 React 事件和原生 addEventListener，容易逻辑错乱
- Link 或 form 内部按钮误跳转？除了 stopPropagation，还需 e.preventDefault() 拦住默认行为
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
