如何实现点击弹窗外部区域关闭弹窗？代码问题排查

我需要实现页面头部搜索弹窗的外部点击关闭功能：点击按钮打开弹窗，点击弹窗以外的区域关闭弹窗。尝试通过点击带有active-search类的body元素移除弹窗和按钮的active类，但方案未生效，原代码如下：

原JS代码 #

const body = document.querySelector("body");
const searchButton = document.querySelector(".search-button");
const searchPopup = document.querySelector(".search-popup");

if (searchButton) {
  searchButton.addEventListener("click", () => {
    searchPopup.classList.toggle("active");
    searchButton.classList.toggle("active");
    body.classList.toggle("active-search");
  });
}

$(".active-search").click(function() {
  searchPopup.removeClass("active");
  searchButton.removeClass("active");
});

原HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="search-wrapper">
    <button class="search-button">Open Search</button>
    <div class="search-popup"></div>
  </div>
</header>

问题原因 #

1. 动态元素事件绑定失效：active-search类是点击按钮后才添加到body的，页面初始化时该类不存在，直接用$(".active-search").click()绑定事件，只会作用于初始化时已存在的元素，后续动态添加的类无法触发事件。
2. 事件冒泡导致误关闭：点击搜索按钮或弹窗本身时，事件会向上冒泡到body，触发关闭逻辑，导致弹窗刚打开就被关闭。

修复方案 #

通过事件委托绑定body的点击事件，并在按钮和弹窗的点击事件中阻止事件冒泡，避免误触发关闭逻辑：

const body = document.querySelector("body");
const searchButton = document.querySelector(".search-button");
const searchPopup = document.querySelector(".search-popup");

if (searchButton) {
  // 按钮点击：切换状态，阻止事件冒泡到body
  searchButton.addEventListener("click", (e) => {
    e.stopPropagation();
    const isActive = searchPopup.classList.contains("active");
    searchPopup.classList.toggle("active");
    searchButton.classList.toggle("active");
    body.classList.toggle("active-search", !isActive);
  });

  // 弹窗内部点击：阻止事件冒泡，避免触发body的关闭逻辑
  searchPopup.addEventListener("click", (e) => {
    e.stopPropagation();
  });
}

// 事件委托：监听body的点击，仅当body带有active-search类时执行关闭
$(document).on("click", ".active-search", function() {
  searchPopup.classList.remove("active");
  searchButton.classList.remove("active");
  body.classList.remove("active-search");
});

补充样式提示：需要给.search-popup设置默认隐藏样式（如display: none;），添加active类时设置显示样式（如display: block;），否则弹窗始终可见

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