CloseWatcher:接管「关闭请求」
<dialog> 和 popover 自带「按 Esc / 安卓返回键即可关闭」的能力。但如果你自行实现了一个抽屉、全屏选择器、自定义菜单(未使用这两个原生元素),如何让它也能被这些「关闭手势」关掉?尤其在安卓上:用户按系统返回键,期望是「关闭这个浮层」,而非「退出整个网页」。
CloseWatcher 正是这件事的统一收口。new CloseWatcher() 之后,浏览器把 Esc、安卓返回键等平台「关闭请求」都汇集为它的 close 事件,你在其中执行真正的关闭即可——跨平台差异由浏览器替你抹平。
1 · API 速记
requestClose()——先派cancel,没被preventDefault()才派close。等价于「用户按 Esc」的程序版。close()——直接派close(不经 cancel),用于不可阻止的关闭。destroy()——停用 watcher,不再接收关闭请求(close处理完会自动调一次)。- 无用户激活时创建的多个 watcher 会被归为一组,一次关闭请求会一并关闭——不要在没有交互时滥用创建。
它和 closedby / popover light dismiss 的关系:后两者是原生元素自带的关闭能力;CloseWatcher 是给你自己的 UI 补上「同一套关闭语义」的底层原语——能用 <dialog> / popover 时应优先使用它们,确需自行实现时才动用
CloseWatcher。
延伸阅读:CloseWatcher API · MDN——new CloseWatcher() 的 close / cancel 事件、requestClose() / destroy(),以及它如何统一
Esc 与安卓返回键。