Popup弹窗事件传播问题：点击外部区域无法正确关闭弹窗

• 现有代码已实现基础弹窗交互：触发popItUp()可打开弹窗，点击关闭按钮触发popItDown()可关闭弹窗
• 已修复历史问题：原popItUp()方法内笔误将document.querySelector写为this.querySelector导致的类型报错已处理
• 待实现需求：点击弹窗外部的半透明遮罩区域时自动关闭弹窗
• 现存矛盾：如果移除cancelBubble阻止事件冒泡逻辑，点击弹窗内部区域也会触发关闭；保留阻止冒泡逻辑则无法实现点击遮罩关闭的需求
• 关联场景：页面存在多列表项循环渲染弹窗的业务场景

1. 事件重复绑定：HTML标签上已经写了onclick="popItUp()"，JS逻辑中又通过addEventListener给所有.popup元素绑定了一次打开事件，导致点击时事件多次触发
2. 遮罩层无法直接绑定事件：当前半透明遮罩是通过.popuptext.show::before伪元素实现的，伪元素不属于DOM树节点，无法直接给它绑定点击监听
3. 冒泡拦截逻辑粗暴：直接在弹窗容器上全量阻止冒泡，没有区分点击目标，导致外层元素无法正确识别点击来源是遮罩还是弹窗内部
4. 样式层级错误：原遮罩伪元素z-index设为-50，会被页面普通元素覆盖，无法正常接收点击事件

核心思路：去掉冗余的事件绑定，不再靠全局阻止冒泡拦截事件，而是通过判断点击目标的位置区分「点击遮罩」和「点击弹窗内容区」两种场景，仅在点击遮罩/关闭按钮时触发关闭逻辑。 #

第一步：替换JavaScript逻辑 #

// 打开弹窗
function popItUp() {
  document.querySelector(".popuptext").classList.add("show");
  document.body.style.overflow = "hidden";
}

// 关闭弹窗
function popItDown() {
  const activePopup = document.querySelector(".popuptext.show");
  if (activePopup) {
    activePopup.classList.remove("show");
    document.body.style.overflow = "visible";
  }
}

// 全局点击监听，处理遮罩点击关闭逻辑
document.addEventListener("click", (e) => {
  const activePopup = document.querySelector(".popuptext.show");
  // 无激活弹窗时直接跳过
  if (!activePopup) return;
  // 点击目标在弹窗内容区/弹窗触发按钮区域时，不触发关闭
  if (
    activePopup.contains(e.target) ||
    e.target.closest(".popup") && !e.target.closest(".popuptext")
  ) {
    return;
  }
  // 其余点击场景（即点击遮罩区域）触发关闭
  popItDown();
});

// 页面加载完成后统一绑定事件
document.addEventListener("DOMContentLoaded", () => {
  // 绑定弹窗触发按钮
  const popups = document.querySelectorAll(".popup");
  popups.forEach((popup) => {
    popup.addEventListener("click", popItUp);
  });
  // 绑定关闭按钮
  const closeBtns = document.querySelectorAll(".popup--close");
  closeBtns.forEach(btn => {
    btn.addEventListener("click", popItDown);
  });
});

第二步：调整CSS样式层级 #

修正遮罩尺寸、层级问题，保证遮罩覆盖全视口、弹窗内容区显示在遮罩上方：

.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 8px 0;
  z-index: 1;
}

.popup .popuptext.show::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 99;
}

.popup .popuptext::after {
  content: "";
  position: fixed;
}

.popuptext.show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
  position: fixed;
  top: 15%;
  left: 11%;
  justify-content: center;
  display: block;
  width: 75%;
  height: 80%;
  overflow-y: auto;
  overflow-x: auto;
  z-index: 100;
  background: #555;
}

第三步：精简HTML结构 #

移除冗余的行内点击事件、无效的冒泡拦截逻辑：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="popup popup--maxwidth">
    CLICK ME FOR POPUP
    <div class="popup--container">
      <span class="popuptext">
        <span class="popup--close"><i class="fa fa-close" style="font-size:36px; color:white;">CLOSEBUTTON</i></span>
        <div class="partner-container">
          Awesome Content
        </div>
      </span>
    </div>
  </div>
</div>

方案说明 #

• 移除了原代码中粗暴的全局阻止冒泡逻辑，不会影响页面其他元素的事件响应
• 支持多列表项循环渲染场景，不需要给每个弹窗加单独特殊标识
• 点击弹窗内部的表单、按钮、滚动区域都不会误触发关闭，只有点击遮罩和关闭按钮才会关闭弹窗
• 修复了原遮罩层尺寸、层级错误的问题，遮罩可完整覆盖整个视口

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