应仅在点击弹窗外部时关闭，通过 modal.contains(e.target) 判断；避免 stoppropagation，统一由外层检测控制；用 .is-open 类名切换显隐；激活按钮需加入白名单排除关闭。

点击弹窗内部时意外触发外部关闭，本质不是冒泡本身的问题，而是关闭逻辑判断太粗糙。关键在于：只在真正点到弹窗外面时才关闭，而不是一听到 click 就关。

用 contains 判断点击位置是否在弹窗内

监听 document 的 click 事件，拿到 e.target 后，检查它是否属于弹窗或其子元素。只有当点击目标完全不在弹窗及其后代中时，才执行关闭。

• 给弹窗容器加一个明确的类名，比如 .modal 或 .dropdown
• 在全局 click 回调里写：if (!modal.contains(e.target)) closeModal()
• 这样即使弹窗里有按钮、输入框、链接，点它们都不会关窗

别在子元素里乱调 stopPropagation

弹窗内部的按钮、表单控件等，正常响应自己的逻辑即可。除非有特殊需求（比如右键菜单里的“复制”不能连带选中行），否则不要主动调用 event.stopPropagation()。

Java JDK 25

Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。

下载

• stopPropagation 会切断冒泡路径，可能影响其他功能，比如埋点统计、权限拦截等
• 统一由外层容器检测来决定是否关闭，比每个子项手动拦截更可靠、更易维护
• 子组件保持“静默”，交互逻辑自然解耦

把显隐控制交给 CSS 类，而非 display 切换

用添加/移除 .is-open 这类类名来控制显示隐藏，比直接改 style.display 更利于调试和复用。

• CSS 中写 .modal.is-open { opacity: 1; visibility: visible; }
• JavaScript 只负责切换类名，不操作样式属性
• 方便配合 transition 做动画，也避免 display: none 后无法调用 contains 检测的问题

注意激活按钮也要纳入白名单

用户点击打开弹窗的按钮，再次点击它时通常应保持弹窗开启，而不是关掉。所以判断逻辑里要额外排除这个按钮。

• 可以加个 data-trigger 属性标识激活源，比如 data-trigger="modal"
• 在 click 处理中加条件：if (e.target.hasAttribute('data-trigger')) return
• 或者把激活按钮也放进容器检测范围：modal.contains(e.target) || triggerBtn.contains(e.target)

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南