ToggleEvent
Baseline 2025Newly available
Since January 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
ToggleEvent
インターフェイスは、ポップオーバー要素の状態が表示と非表示の間で切り替わるときにユーザーに通知するイベントを表します。
これは HTMLElement
の beforetoggle
および toggle
イベントのためのイベントオブジェクトであり、表示中と非表示の間で遷移したときに(それぞれ前と後に)ポップオーバーで発行されます。
コンストラクター
ToggleEvent()
Experimental-
ToggleEvent
オブジェクトを作成します。
インスタンスプロパティ
このインターフェイスは、親である Event
からプロパティを継承しています。
ToggleEvent.newState
読取専用 Experimental-
(
"open"
または"closed"
の)文字列で、要素が遷移した後の状態を表します。 ToggleEvent.oldState
読取専用 Experimental-
(
"open"
または"closed"
の)文字列で、要素が遷移する前の状態を表します。
例
基本的な例
js
const popover = document.getElementById("mypopover");
// ...
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
console.log("Popover is being shown");
} else {
console.log("Popover is being hidden");
}
});
仕様書
Specification |
---|
HTML # toggleevent |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
ToggleEvent | ||||||||||||
ToggleEvent() constructor | ||||||||||||
newState | ||||||||||||
oldState |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.