HTMLElement:toggle 事件

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

HTMLElement 接口的 toggle 事件会在弹出框元素、<dialog> 元素或 <details> 元素刚刚显示或隐藏后触发。

  • 如果元素从隐藏过渡到显示,则 event.oldState 属性会被设置为 closedevent.newState 属性会被设置为 open
  • 如果元素从显示过渡到隐藏,则 event.oldState 会是 openevent.newState 会是 closed

此事件不可取消

语法

在类似 addEventListener() 这样的方法中使用事件名称,或设置事件处理器属性。

js
addEventListener("toggle", (event) => {});

ontoggle = (event) => {};

事件类型

示例

以下示例代码演示了如何使用弹出框toggle 事件。相同的代码也可以相同的方式用于 <dialog><details> 元素。

基础示例

此示例显示了如何监听 toggle 事件并记录结果。

HTML

html
<button popovertarget="mypopover">打开/关闭弹出框</button>
<div id="mypopover" popover>弹出框的内容</div>

JavaScript

以下代码为 toggle 事件添加事件处理器,并记录其状态。

js
const popover = document.getElementById("mypopover");

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("已显示弹出框");
  } else {
    console.log("已隐藏弹出框");
  }
});

结果

关于 toggle 事件合并的备注

如果在事件循环开始一个循环之前触发了多个 toggle 事件,则只会触发一次事件。这被称为“事件合并”。

例如:

js
popover.addEventListener("toggle", () => {
  //……
});

popover.showPopover();
popover.hidePopover();
// `toggle` 仅触发一次

其他示例

规范

Specification
HTML
# event-toggle

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
toggle event
toggle event fires at details elements
toggle event fires at dialog elements
toggle event fires at popover elements

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support

参见