原生 popover 的 beforetoggle 事件中 preventdefault 失效，因其仅用于通知、不支持拦截；真正可拦截关闭的时机是 mousedown 和 keydown，需监听 document 并提前阻止。
原生 popover 的 beforetoggle 为什么 preventDefault 失效
因为浏览器对原生 popover 的关闭流程做了硬性控制：beforetoggle 事件在关闭逻辑启动后才派发，此时默认行为（移除 popover）已进入不可逆阶段。调用 event.preventDefault() 完全无效——这不是 bug，而是规范设计：该事件仅用于通知，不支持拦截。
真正能拦截关闭的时机只有 mousedown 和 keydown
用户点击外部区域触发关闭，本质是 mousedown 导致焦点离开 popover 容器；按 Esc 或 Tab 则走键盘路径。这两类动作必须提前拦截：
- 监听
document上的mousedown，检查event.target是否在 popover 内部：用popoverElement.contains(event.target)，别用closest() - 若不在内部，调用
event.preventDefault()+event.stopPropagation()，再立即执行popoverElement.showPopover() - 监听
keydown，对Escape和Tab键做同样处理；注意 Safari 下Tab可能绕过preventDefault，需配合tabindex="-1"和手动管理焦点链
动态挂载/卸载时容易漏掉的清理动作
如果 popover 是条件渲染（比如 Vue 的 v-if 或 React 的 useState），监听器没及时清除会导致两个问题：
-
document.removeEventListener('mousedown', handler)必须在组件卸载或 popover 隐藏时执行，否则残留监听器会访问已销毁的 DOM 节点，抛出Cannot read property 'contains' of null - handler 不能写成内联箭头函数（如
(e) => {...}），否则removeEventListener无法匹配——应提名为具名函数，或用ref缓存 - 多个 popover 共存时，每个都要绑定独立监听器，避免一个关闭影响另一个
移动端 touchstart 必须同步处理
原生 popover 在 iOS/Safari 上对 touchstart 的响应比 click 更早，且可能穿透到下层 canvas 或 iframe。只监听 mousedown 不够：
- 把
touchstart加入监听列表，逻辑与mousedown完全一致 - 注意
touchstart默认可滚动，必要时加event.preventDefault()防止页面意外滚动 - 不要混用
click—— 它触发太晚，popover 已经开始隐藏动画了
mousedown 和 keydown 把焦点和显示状态主动夺回来。最容易被忽略的是：beforetoggle 根本拦不住，以及 touchstart 比 mousedown 还要早一步。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
