本文详解因事件冒泡导致模态框关闭失效的根本原因，并提供使用 Event.stoppropagation() 阻断冒泡的完整解决方案，同时修正图片赋值错误，确保点击 × 按钮能可靠隐藏弹窗。
在实现图片点击预览模态框（modal）功能时，一个常见却容易被忽视的问题是：点击关闭按钮（如 ×）后，模态框并未隐藏，反而可能瞬间闪现或无响应。这并非 html 标签未闭合（如问题标题所疑），而是典型的 dom 事件冒泡（Event Bubbling） 导致的逻辑冲突。
? 问题根源分析
观察你的 HTML 结构：
... @@##@@ × 虽然 .popup-image 与 .entry 是兄弟元素（同属 .imageContainer），但关键在于：你为所有 .imageContainer div 绑定了 onclick 事件——这包括了模态框内部的 元素！因为 本身是一个
更准确地说，问题实际出在事件委托层级与目标判断缺失：当你点击 时，事件会向上冒泡至其父级 .popup-image（一个 div），进而触发你为「所有 .imageContainer div」注册的 onclick 回调，执行 display = ‘block’ —— 这直接覆盖了你刚设置的 display = ‘none’，造成“关不掉”的假象。
✅ 正确解决方案
1. 精准绑定事件目标，避免误触
不要用宽泛的 ‘.imageContainer div’，而应明确限定为缩略图容器（例如带 data-img 属性的 .entry-image）：
// ✅ 推荐：只给真正需要触发弹窗的元素绑定 document.querySelectorAll('.entry-image').forEach(image => { image.onclick = function() { const popup = document.querySelector('.popup-image'); const img = popup.querySelector('img'); popup.style.display = 'block'; img.src = this.getAttribute('data-img'); // ⚠️ 修正：用 .src 而非 .div（.div 无效） }; });2. 为关闭按钮添加 stopPropagation() 并独立绑定
// ✅ 为关闭按钮单独绑定，阻止事件冒泡到父级 document.querySelector('.popup-image span').onclick = function(e) { e.stopPropagation(); // ? 关键：阻止事件向上传播到 .popup-image 或 .imageContainer document.querySelector('.popup-image').style.display = 'none'; };? 提示：e.stopPropagation() 仅阻止当前事件在 DOM 树中的冒泡路径，不影响其他事件监听器执行，安全可靠。
3. 补充健壮性优化（推荐）
- 添加 esc 键关闭支持：
document.addEventListener('keydown', e => { if (e.key === 'Escape' && document.querySelector('.popup-image').style.display === 'block') { document.querySelector('.popup-image').style.display = 'none'; } }); - 点击模态框背景关闭（非图片/按钮区域）：
document.querySelector('.popup-image').onclick = e => { if (e.target === e.currentTarget) { // 点击的是 .popup-image 本身（非 img 或 span） e.currentTarget.style.display = 'none'; } };
? 注意事项总结
- ❌ 错误写法：img.div = … →
元素没有 div 属性，应使用 img.src。
- ❌ 宽泛选择器：’.imageContainer div’ 会捕获过多无关元素，易引发冲突。
- ✅ 最佳实践：为交互元素添加语义化类名（如 .thumbnail-trigger, .modal-close），提升可维护性。
- ✅ 始终检查事件目标（e.target）与事件委托目标（e.currentTarget）的区别，善用 stopPropagation() 控制事件流。
通过以上调整，你的模态框将具备可靠的打开/关闭行为，彻底解决“span 不关闭”的表象问题——本质是事件控制逻辑的精细化重构。