点击Modal外部无法关闭？添加事件监听仍无效求排查

你点击Modal外部（背景区域）无法关闭的核心问题在于：

• Modal内部的<em>、<img>、<caption>等元素占据了容器的大部分区域，点击这些区域时，event.target指向的是内部元素而非.modal本身
• 原JS判断条件if (event.target === modal)仅在点击到.modal元素本身（比如顶部20px的padding区域）时才会触发关闭，自然大部分点击都无法命中该条件

以下两种修复方式任选其一即可：

方式1：修改JS判断逻辑（无需改动HTML/CSS） #

替换原window点击事件监听代码，通过closest()方法精准判断点击区域是否为Modal背景：

window.addEventListener("click", function(event) {
  // 确认点击的是Modal容器，且不是内部的内容/按钮元素
  if (modal.contains(event.target) && 
      !event.target.closest('.close, .modal-content, #caption')) {
    modal.style.display = "none";
  }
});

方式2：调整HTML结构（更规范的布局方案） #

1. 修改HTML，用块级容器包裹Modal内部所有内容，移除语义化的<em>标签：

<div id="imageModal" class="modal">
  <div class="modal-inner">
    <span class="close">×</span> 
    <img alt="" class="modal-content" id="modalImage" />
    <div id="caption"></div>
  </div>
</div>

2. 调整CSS，用flex布局实现内部容器居中（替代原padding-top）：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
  /* 改用flex布局实现顶部留空+居中 */
  display: flex;
  align-items: flex-start;
  padding-top: 20px;
}

.modal-inner {
  margin: auto;
  text-align: center;
}

3. 保留原JS判断逻辑即可，此时点击Modal背景区域时，event.target会直接命中.modal元素，正常触发关闭。

• 避免用<em>这类语义化标签做布局容器，改用<div>更符合规范
• 可将关闭逻辑封装为函数，减少重复代码：

function closeModal() {
  modal.style.display = "none";
}
// 后续在关闭按钮和window点击事件中直接调用closeModal()即可

内容的提问来源于stack exchange，提问作者newuser