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 上檢視此頁面 • 報告此內容的問題