如何为Popup设置超时关闭及点击外部关闭功能？

我做了一个点击按钮触发的Popup，原本得再次点击按钮才会消失。已经实现了弹窗10秒后自动关闭的功能，现在需要添加点击页面其他区域时关闭弹窗的功能，相关基础代码如下：

原触发函数 #

// 点击div时打开弹窗
function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

样式代码 #

.popuptext {
  display: none;
}
.popuptext.show {
  display: block;
}

HTML结构 #

<div class="popup" onclick="myFunction()">点击我切换弹窗显示状态！
  <span class="popuptext" id="myPopup">一个简单的弹窗！</span>
</div>

已实现超时关闭的修改后函数 #

function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if(popup.classList.contains("show"))
    setTimeout(() => popup.classList.remove("show"), 10000)
}

新增点击外部关闭弹窗的实现方案 #

要实现点击页面其他区域关闭弹窗，我们可以给document添加点击事件监听，同时避开弹窗按钮和弹窗本身的点击操作，具体修改如下：

修改后的完整JavaScript代码

let popupTimeout;
let clickOutsideListener;

function myFunction(e) {
  // 阻止事件冒泡，避免刚打开弹窗就触发document的点击事件导致关闭
  e.stopPropagation();
  const popup = document.getElementById("myPopup");
  const isShowing = popup.classList.contains("show");
  
  if (isShowing) {
    // 关闭弹窗
    popup.classList.remove("show");
    // 清除自动关闭的定时器
    clearTimeout(popupTimeout);
    // 移除外部点击监听，防止内存泄漏
    document.removeEventListener("click", clickOutsideListener);
  } else {
    // 打开弹窗
    popup.classList.add("show");
    // 设置10秒自动关闭
    popupTimeout = setTimeout(() => {
      popup.classList.remove("show");
      document.removeEventListener("click", clickOutsideListener);
    }, 10000);
    // 定义外部点击关闭逻辑
    clickOutsideListener = function(e) {
      const popupContainer = document.querySelector(".popup");
      // 判断点击目标是否不在弹窗容器范围内
      if (!popupContainer.contains(e.target)) {
        popup.classList.remove("show");
        clearTimeout(popupTimeout);
        document.removeEventListener("click", clickOutsideListener);
      }
    };
    // 添加外部点击监听
    document.addEventListener("click", clickOutsideListener);
  }
}

修改后的HTML代码（需传递事件参数）

<div class="popup" onclick="myFunction(event)">点击我切换弹窗显示状态！
  <span class="popuptext" id="myPopup">一个简单的弹窗！</span>
</div>

关键说明

• e.stopPropagation()：阻止按钮点击事件向上冒泡到document，避免弹窗刚打开就被误关闭
• 全局变量popupTimeout和clickOutsideListener：用于保存定时器和监听函数，弹窗关闭时清除定时器、移除监听，避免内存泄漏
• popupContainer.contains(e.target)：判断点击元素是否属于弹窗容器，不属于则执行关闭操作
• 弹窗打开时绑定监听、关闭时解绑：防止重复绑定事件导致多次触发关闭逻辑

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