CloseWatcher

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细检查 浏览器兼容性表。

CloseWatcher 接口监听并响应关闭请求。

某些 UI 组件具有“关闭行为”，这意味着组件会显示，用户可以在完成操作后关闭它。例如：侧边栏、弹出窗口、对话框或通知。

用户通常希望能够使用特定机制关闭这些元素，而该机制往往是设备特定的。例如，在具有键盘的设备上，它可能是 Esc 键，但 Android 可能会使用后退按钮。对于内置组件，例如 弹出框 或 <dialog> 元素，浏览器会处理这些差异，在用户执行适合设备的关闭操作时关闭元素。但是，当 Web 开发人员实现他们自己的可关闭 UI 组件（例如，侧边栏）时，很难实现这种设备特定的关闭行为。CloseWatcher 接口通过在用户执行设备的关闭操作时向元素传递 close 事件来解决此问题。

EventTarget CloseWatcher

CloseWatcher 接口继承自 EventTarget.

构造函数

CloseWatcher()

创建一个新的 CloseWatcher 实例。

实例方法

此接口还从其父级 EventTarget 继承方法。

CloseWatcher.requestClose()

触发 cancel 事件，如果该事件没有被 Event.preventDefault() 取消，则继续触发 close 事件，最后像调用 destroy() 一样停用关闭观察器。

CloseWatcher.close()

立即触发 close 事件，而不先触发 cancel，并像调用 destroy() 一样停用关闭观察器。

CloseWatcher.destroy()

停用关闭观察器，使其不再接收 close 事件。

事件

cancel

在 close 事件之前触发的事件，以便可以阻止 close 事件触发。

close

收到关闭请求时触发的事件。

示例

处理关闭请求

在此示例中，您拥有自己的 UI 组件（选择器），并且您希望同时支持平台的默认关闭方法（例如 Esc 键）和自定义关闭方法（关闭按钮）。

您创建一个 CloseWatcher 来处理所有 close 事件。

UI 组件的 onclick 处理程序可以调用 requestClose 来请求关闭，并将您的关闭请求路由到平台关闭方法使用的相同 onclose 处理程序。

js
const watcher = new CloseWatcher();
const picker = setUpAndShowPickerDOMElement();
let chosenValue = null;

watcher.onclose = () => {
  chosenValue = picker.querySelector("input").value;
  picker.remove();
};

picker.querySelector(".close-button").onclick = () => watcher.requestClose();

规范

规范
HTML 标准
# closewatcher

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅