如何阻止点击HTML Popover元素外部区域使其关闭？

嘿，我完全懂你遇到的困扰——原生HTML Popover默认点击外部背景或者按ESC键就会自动关闭，这对于加载弹窗来说真的很麻烦，毕竟加载过程中我们肯定不希望用户误触就打断这个流程。

其实解决这个问题的核心就是拦截那些非我们主动触发的关闭事件，原生Popover提供了beforetoggle事件，刚好可以用来做这件事。我给你修改一下代码，你直接用就行：

修改后的完整代码 #

JavaScript部分

// 用一个变量标记是不是我们主动要关闭弹窗
let isManualClose = false;

function doAsyncStuff() {
  const loadingScreenHtmlElement = document.getElementById("loading-screen");
  // 每次打开弹窗时重置标记
  isManualClose = false;
  loadingScreenHtmlElement.showPopover();

  setTimeout(() => {
    // 异步操作完成，标记为手动关闭，再关闭弹窗
    isManualClose = true;
    loadingScreenHtmlElement.hidePopover();
  }, 3000);
}

// 给弹窗添加beforetoggle事件监听
document.getElementById("loading-screen").addEventListener('beforetoggle', (e) => {
  // 当弹窗要切换到关闭状态，且不是我们手动触发的，就阻止默认行为
  if (e.newState === 'closed' && !isManualClose) {
    e.preventDefault();
  }
});

CSS部分

#loading-screen::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

HTML部分

<div popover id="loading-screen">
  <div>Loading spinner goes here</div>
</div>

<button onclick="doAsyncStuff()">Do it</button>

逻辑说明 #

• 我们用isManualClose这个变量来区分手动触发的关闭和用户误触/ESC触发的关闭：
  • 当点击按钮打开弹窗时，重置这个变量为false，表示目前不允许非手动关闭；
  • 异步操作完成后，我们先把变量设为true，再调用hidePopover()，这时候beforetoggle事件会检测到是手动关闭，就不会拦截；
  • 如果用户点击弹窗外部或者按ESC键，这个变量还是false，beforetoggle事件就会调用e.preventDefault()阻止弹窗关闭。

这样修改之后，你的加载弹窗就只会在异步操作完成后才会关闭，完全不用担心用户误触外部区域导致弹窗提前关闭的问题啦！

备注：内容来源于stack exchange，提问作者baitendbidz