本文详解因事件冒泡导致模态框关闭按钮无法正常隐藏弹窗的问题，通过 event.stoppropagation() 阻断点击事件向上传播，并修正 dom 属性赋值错误，确保图片模态框开闭逻辑准确可靠。
在实现图片点击放大预览的模态框（modal）功能时，一个常见却容易被忽视的问题是：点击关闭按钮（如 <span>×</span>）后，模态框并未隐藏，反而可能瞬间闪现或无响应。根本原因并非 <span> 标签未闭合（HTML 中 <span>×</span> 语法完全正确），而是 JavaScript 中的事件冒泡（Event Bubbling）机制导致了冲突。
观察原始代码：
document.querySelectorAll('.imageContainer div').forEach(image => {
image.onclick = () => {
document.querySelector('.popup-image').style.display = 'block';
document.querySelector('.popup-image img').div = image.getAttribute('data-img'); // ❌ 错误赋值
}
});
document.querySelector('.popup-image span').onclick = () => {
document.querySelector('.popup-image').style.display = 'none';
};问题有两点：
事件冒泡干扰：.popup-image span 位于 .imageContainer div 的内部结构中（尽管视觉上是独立浮层，但 DOM 层级上它仍是 .imageContainer 的子元素）。当用户点击 × 按钮时，span 的 click 事件首先触发（设为 display: none），但随后该事件会向上冒泡至其父级 .imageContainer div，进而再次触发 display: block —— 导致模态框“刚关又开”，看似“不关闭”。
-
DOM 属性赋值错误：document.querySelector('.popup-image img').div = ... 是无效操作。<img> 元素没有 div 属性；此处本意应是更新 src 属性以切换图片：
document.querySelector('.popup-image img').src = image.getAttribute('data-img');
✅ 正确解法如下：
- 在关闭按钮的事件处理器中调用 e.stopPropagation()，阻止事件向父元素传播；
- 修正图片地址赋值逻辑，使用 img.src 而非不存在的 .div；
- （可选增强）添加空元素检查，避免 querySelector 返回 null 导致脚本报错。
完整修复后的 JS 代码：
// 确保 DOM 加载完成后再执行
document.addEventListener('DOMContentLoaded', () => {
const popup = document.querySelector('.popup-image');
const popupImg = popup?.querySelector('img');
const closeBtn = popup?.querySelector('span');
if (!popup || !popupImg || !closeBtn) {
console.warn('Modal elements not found. Check HTML structure.');
return;
}
// 绑定图片容器点击事件（推荐使用委托或更精准选择器）
document.querySelectorAll('.imageContainer .entry-image').forEach(image => {
image.onclick = (e) => {
e.stopPropagation(); // 防止意外触发外层事件
popup.style.display = 'block';
popupImg.src = image.getAttribute('data-img') || './src/assets/img/feature1.jpeg';
};
});
// 关闭按钮：阻止冒泡 + 隐藏弹窗
closeBtn.onclick = (e) => {
e.stopPropagation();
popup.style.display = 'none';
};
// 可选：点击遮罩背景关闭（需确保 span 不在遮罩内触发）
popup.onclick = (e) => {
if (e.target === popup) {
popup.style.display = 'none';
}
};
});? 关键注意事项：
- stopPropagation() 是解决此类嵌套点击冲突的黄金法则，尤其适用于模态框、下拉菜单、抽屉面板等浮层组件；
- 始终校验 querySelector 返回值是否为 null，避免运行时错误；
- 若 .popup-image 在多个 .imageContainer 中重复出现，建议将模态框移至 <body> 顶层，并通过 data-id 动态关联，提升可维护性；
- CSS 中 .popup-image 的 z-index: 100 已足够，但需确保其父容器无 overflow: hidden 或 transform 等创建新层叠上下文的属性，以免遮挡。
至此，点击 × 按钮即可稳定关闭模态框，且图片按需动态加载，交互体验清晰可靠。
