HTMLElement: toggle 事件

Baseline 广泛可用 *

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流浏览器均已支持。

* 此特性的某些部分可能存在不同级别的支持。

HTMLElement 接口的 toggle 事件会在 popover 元素、<dialog> 元素或 <details> 元素显示或隐藏后立即触发。

如果元素正在从隐藏状态转变为显示状态，则 event.oldState 属性将被设置为 closed，而 event.newState 属性将被设置为 open。
如果元素正在从显示状态转变为隐藏状态，则 event.oldState 将是 open，而 event.newState 将是 closed。

此事件是不可取消的。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

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

ontoggle = (event) => { }

事件类型

一个 ToggleEvent。继承自 Event。

示例

下面的示例代码演示了 toggle 事件如何用于 popover。对于 <dialog> 或 <details> 元素，可以使用相同的代码以相同的方式进行处理。

基本示例

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

HTML

HTML 由一个 popover 和一个用于切换其打开和关闭状态的按钮组成。

html

<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>

<pre id="log"></pre>

#log {
  height: 150px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

JavaScript

代码添加了一个 toggle 事件的事件监听器，并记录了状态。

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

popover.addEventListener("toggle", (event) => {
  if (event.newState === "open") {
    console.log("Popover has been shown");
  } else {
    console.log("Popover has been hidden");
  }
});

结果

关于 toggle 事件合并的说明

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

例如

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

popover.showPopover();
popover.hidePopover();
// `toggle` only fires once

其他示例

HTMLDialogElement 中的打开模态对话框示例

规范

规范
HTML # event-toggle

浏览器兼容性

另见

popover HTML 全局属性
Popover API
相关事件：beforetoggle

帮助改进 MDN

了解如何贡献

此页面最后修改于 ⁨2025年5月2日⁩，由 MDN 贡献者进行编辑。

在 GitHub 上查看此页面 • 报告此内容的问题