如何修复模态框中关闭按钮（span）点击失效的问题

本文详解因事件冒泡导致模态框关闭按钮无法正常隐藏弹窗的问题，通过 event.stoppropagation() 阻断点击事件向上传播，并修正 dom 属性赋值错误，确保图片模态框开闭逻辑准确可靠。

在实现图片点击放大预览的模态框（modal）功能时，一个常见却容易被忽视的问题是：点击关闭按钮（如 ×）后，模态框并未隐藏，反而可能瞬间闪现或无响应。根本原因并非 标签未闭合（HTML 中 × 语法完全正确），而是 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';
};

问题有两点：

1. 事件冒泡干扰：.popup-image span 位于 .imageContainer div 的内部结构中（尽管视觉上是独立浮层，但 DOM 层级上它仍是 .imageContainer 的子元素）。当用户点击 × 按钮时，span 的 click 事件首先触发（设为 display: none），但随后该事件会向上冒泡至其父级 .imageContainer div，进而再次触发 display: block —— 导致模态框“刚关又开”，看似“不关闭”。

2. DOM 属性赋值错误：document.querySelector('.popup-image img').div = ... 是无效操作。 元素没有 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 中重复出现，建议将模态框移至 顶层，并通过 data-id 动态关联，提升可维护性；
• CSS 中 .popup-image 的 z-index: 100 已足够，但需确保其父容器无 overflow: hidden 或 transform 等创建新层叠上下文的属性，以免遮挡。

至此，点击 × 按钮即可稳定关闭模态框，且图片按需动态加载，交互体验清晰可靠。