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

✅ 正确解法是：在关闭按钮的事件处理器中调用 e.stopPropagation()，阻止事件向父级传播：

document.querySelector('.popup-image span').onclick = (e) => {
  e.stopPropagation(); // ? 关键：阻断冒泡
  document.querySelector('.popup-image').style.display = 'none';
};

⚠️ 同时注意一个隐藏 Bug：你在设置图片时使用了错误的属性赋值方式：

OneAI

将生成式AI技术打包为API，整合到企业产品和服务中

下载

// ❌ 错误：.div 不是 img 元素的有效属性
document.querySelector('.popup-image img').div = image.getAttribute('data-img');

// ✅ 正确：应修改 src 属性以更新图片源
document.querySelector('.popup-image img').src = image.getAttribute('data-img');

完整修复后的 JavaScript 如下：

// 为每个可点击图片容器绑定预览逻辑
document.querySelectorAll('.imageContainer div').forEach(image => {
  image.onclick = () => {
    const popup = document.querySelector('.popup-image');
    const imgEl = popup.querySelector('img');
    const imgUrl = image.getAttribute('data-img');

    if (imgUrl) {
      imgEl.src = imgUrl; // ✅ 使用 src 更新图片
      popup.style.display = 'block';
    }
  };
});

// 为关闭按钮绑定独立逻辑（含冒泡拦截）
document.querySelector('.popup-image span').onclick = (e) => {
  e.stopPropagation(); // ? 必须添加
  document.querySelector('.popup-image').style.display = 'none';
};

// ✨ 进阶建议：添加 ESC 键关闭支持
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    document.querySelector('.popup-image').style.display = 'none';
  }
});

? 额外注意事项：

• 确保 .popup-image 在 DOM 中不嵌套在任何 .imageContainer div 内部（当前结构中它同级并列，是安全的）；若误置于某 div 内，仍会触发冒泡。
• 推荐使用 classList.toggle() 和 CSS 类控制显隐，比直接操作 style.display 更健壮、更易维护。
• 对于多个模态框场景，应改用事件委托 + 动态数据绑定，避免 querySelector 查找局限。

通过以上调整，关闭按钮即可可靠生效，模态框交互将变得精准可控。