HTMLElement: beforetoggle 事件
HTMLElement 介面的 beforetoggle 事件在 popover 或 <dialog> 元素即將顯示或隱藏時觸發。
- 如果元素正從隱藏狀態轉為顯示狀態，則
event.oldState屬性將設定為closed，而event.newState屬性將設定為open。 - 如果元素正從顯示狀態轉為隱藏狀態，則
event.oldState將為open，而event.newState將為closed。
當元素被切換為顯示時，此事件是 可取消的，但當元素關閉時則不可取消。
除其他事項外，此事件可用於：
- 阻止元素顯示。
- 向元素或相關元素新增或刪除類或屬性，例如控制對話方塊開啟和關閉時的動畫行為。
- 在元素開啟之前或隱藏之後清除元素的狀態，例如重置對話方塊表單並將其返回值設為空狀態，或在重新開啟彈出視窗時隱藏任何巢狀的手動彈出視窗。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
addEventListener("beforetoggle", (event) => { })
onbeforetoggle = (event) => { }
事件型別
一個 ToggleEvent。繼承自 Event。
示例
下面的示例演示了 beforetoggle 事件如何用於 popover 或 <dialog> 元素。對於其他元素型別，這些示例將以類似的方式工作。
基本示例
本示例展示瞭如何監聽 beforetoggle 事件並記錄結果。
HTML
HTML 包括一個 popover 和一個用於切換其顯示和隱藏的按鈕。
<button popovertarget="mypopover">Toggle the popover</button>
<div id="mypopover" popover>Popover content</div>
JavaScript
程式碼獲取並添加了 beforetoggle 事件的事件監聽器，並記錄了狀態。
const popover = document.getElementById("mypopover");
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
log("Popover is about to be shown");
} else {
log("Popover is about to be hidden");
}
});
結果
阻止 popover 開啟
當元素被開啟時，beforetoggle 事件是可取消的。
下面我們展示了一個 popover 如何首先檢查是否允許其開啟，如果不允許，則呼叫 Event.preventDefault() 來取消事件。在此示例中，我們使用一個按鈕來設定 popover 是否可以開啟：在一個更“功能齊全”的示例中，這可能取決於應用程式狀態，或者 popover 中的資料是否已準備好顯示。
HTML
HTML 包括一個 popover、一個用於切換其顯示和隱藏的按鈕，以及一個用於設定該按鈕是否可以開啟的按鈕。
<button popovertarget="mypopover">Toggle the popover</button>
<button id="allow_button"></button>
<div id="mypopover" popover>Popover content</div>
JavaScript
首先，我們設定程式碼以模擬一個不允許 popover 開啟的狀態。這由變數 allowOpen 表示，當關聯的按鈕被點選時，該變數會被切換。
const allowButton = document.getElementById("allow_button");
let allowOpen = true;
function toggleState() {
allowOpen = !allowOpen;
allowButton.innerText = allowOpen ? "Open Allowed" : "Open Prevented";
}
toggleState();
allowButton.addEventListener("click", (event) => {
toggleState();
});
程式碼獲取並添加了 beforetoggle 事件的事件監聽器。如果 allowOpen 為 false，則呼叫 preventDefault()，這會阻止彈出視窗開啟。
const popover = document.getElementById("mypopover");
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
if (allowOpen) {
log("Popover is about to be shown");
} else {
log("Popover opening prevented");
event.preventDefault();
}
} else {
log("Popover is about to be hidden");
}
});
結果
關於 beforetoggle 事件合併的說明
如果在事件迴圈有機會迴圈之前觸發了多個 beforetoggle 事件，則只會觸發一個事件。這被稱為“事件合併”。
例如
popover.addEventListener("beforetoggle", () => {
// …
});
popover.showPopover();
popover.hidePopover();
// `beforetoggle` only fires once
其他示例
HTMLDialogElement中的 開啟模態對話方塊 示例
規範
| 規範 |
|---|
| HTML # event-beforetoggle |
瀏覽器相容性
載入中…
另見
popoverHTML 全域性屬性- Popover API
- 相關事件：
toggle