原生 popover 的 beforetoggle.preventDefault() 对关闭无效，仅对打开有效；需用外层 wrapper 管理关闭逻辑，分别拦截 Esc 键和外部点击，并统一入口防重复执行。
原生 popover 在轻触关闭区域（比如点击外部或按 Esc）时会自动隐藏，这个行为无法通过 beforetoggle 中调用 preventDefault() 阻止——浏览器明确不支持拦截该事件的默认关闭逻辑。
为什么 beforetoggle.preventDefault() 不起作用
这是规范限制：beforetoggle 事件在 popover 即将切换状态前触发，但对“关闭”动作的 preventDefault() 被浏览器忽略。你可以监听它、读取 event.state，但不能靠它阻止隐藏。
- 仅对“打开”状态的
beforetoggle调用preventDefault()有效；关闭阶段无效 - 错误写法：
popover.addEventListener('beforetoggle', e => { if (e.state === 'hidden') e.preventDefault(); })—— 完全没效果 - 真正生效的控制点不在事件拦截，而在 DOM 生命周期和触发源管理
用 wrapper + 自定义容器接管关闭逻辑
绕过原生关闭限制的核心做法：不把交互区域（如关闭按钮、遮罩层）放进 popover 元素内部，而是用一个外层 <div> 包裹 popover 和自定义控制区，让关闭操作发生在 popover 外部，再由 JS 主动控制显隐。
- HTML 结构示例：
<div class="popover-wrapper"> <button popovertarget="my-popover">打开</button> <div id="my-popover" popover>内容</div> <div class="popover-overlay"></div> </div>
- 监听
mousedown或pointerdown到.popover-overlay上，调用myPopover.hidePopover()，而非依赖原生点击关闭 - 这样 popover 始终处于“受控状态”，关闭动作由你发起，不是浏览器自动触发
Esc 和点击外部失焦的统一拦截方案
原生 popover 的关闭触发源有两类：键盘（Esc）和鼠标/触摸（外部点击）。它们必须分别处理，且顺序不能错。
立即学习“前端免费学习笔记（深入）”；
- 对
keydown监听 Esc：检查document.activeElement是否在 popover 内，是则e.preventDefault()并手动决定是否隐藏 - 对外部点击，监听
document的mousedown，用myPopover.matches(':popover-open')判断当前是否打开，再用!myPopover.contains(e.target)确认点击是否在 popover 外 - 注意：不要监听
click，因为此时焦点已丢失，popover 可能已被浏览器提前关闭 - 移动端需额外监听
touchstart，防止穿透到下层 canvas 或滚动容器
最易被忽略的是：popover 打开后，若用户快速连续点击外部两次，第二次可能触发浏览器原生关闭而绕过你的逻辑——所以所有关闭路径都得走同一入口函数，加个开关变量（如 isClosing）防重复执行。
