本文详解因事件冒泡导致模态框关闭失效的根本原因，并提供使用 event.stoppropagation() 阻断冒泡的完整解决方案，同时修正图片赋值错误，确保点击 × 按钮能可靠隐藏弹窗。
在实现图片点击预览模态框（modal）功能时，一个常见却容易被忽视的问题是：点击关闭按钮（如 <span>×</span>）后，模态框并未隐藏，反而可能瞬间闪现或无响应。这并非 HTML 标签未闭合（如问题标题所疑），而是典型的 DOM 事件冒泡（Event Bubbling） 导致的逻辑冲突。
? 问题根源分析
观察你的 HTML 结构：
<div class="imageContainer">
<div class="entry ..."> <!-- 可点击的缩略图容器 -->
...
</div>
<div class="popup-image"> <!-- 模态框（同级，非子元素） -->
<img ...>
<span>×</span> <!-- 关闭按钮 -->
</div>
</div>虽然 .popup-image 与 .entry 是兄弟元素（同属 .imageContainer），但关键在于：你为所有 .imageContainer div 绑定了 onclick 事件——这包括了模态框内部的 <span> 元素！因为 <span> 本身是一个 <div> 的后代（document.querySelectorAll('.imageContainer div') 会匹配所有后代 div，而你的 <span> 虽非 div，但其父级 .popup-image 是 div，且该 div 也匹配选择器）。
更准确地说，问题实际出在事件委托层级与目标判断缺失：当你点击 <span> 时，事件会向上冒泡至其父级 .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 = ... → <img> 元素没有 div 属性，应使用 img.src。
- ❌ 宽泛选择器：'.imageContainer div' 会捕获过多无关元素，易引发冲突。
- ✅ 最佳实践：为交互元素添加语义化类名（如 .thumbnail-trigger, .modal-close），提升可维护性。
- ✅ 始终检查事件目标（e.target）与事件委托目标（e.currentTarget）的区别，善用 stopPropagation() 控制事件流。
通过以上调整，你的模态框将具备可靠的打开/关闭行为，彻底解决“span 不关闭”的表象问题——本质是事件控制逻辑的精细化重构。
