← Dialog / Popover · 浮层与「关闭」的现代解法 / CloseWatcher:接管「关闭请求」 待审核 7 / 9
CloseWatcher · Esc + 返回键

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 与安卓返回键。