HTMLElement: beforetoggle イベント
Baseline 2024
最近利用可能
2024年4月以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
beforetoggle は HTMLElement インターフェイスのイベントで、ポップオーバー要素または <dialog> 要素が表示または非表示になる直前に発行されます。
- 要素が非表示状態から表示状態に遷移した場合、
event.oldStateプロパティにはclosedが、event.newStateプロパティにはopenが設定されます。 - 要素が表示状態から非表示状態に遷移した場合、
event.oldStateはopenに、event.newStateはclosedになります。
このイベントは、要素が開いた ("show") 状態に切り替わる際にはキャンセル可能ですが、要素が閉じられる際にはキャンセルできません。
このイベントは、特に次のような目的に使用できます。
- 要素が表示されないようにする。
- 要素または関連付けられた要素に対してクラスやプロパティを追加・削除する。例えば、ダイアログの開閉時のアニメーション動作を制御する場合など。
- 要素が開かれる前、または非表示になった後に、その状態をクリアする。例えば、ダイアログフォームをリセットして値を空の状態に戻したり、ポップアップを再表示する際にネストされた手動ポップオーバーを非表示にしたりする場合など。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("beforetoggle", (event) => { })
onbeforetoggle = (event) => { }
イベント型
ToggleEvent です。Event から継承しています。
例
下記の実例は、ポップオーバー要素において、beforetoggle イベントがどのように使用されるかを示しています。
これらの例は、<dialog> 要素でも同様に機能します。
基本的な例
この例では、beforetoggle イベントを待ち受けし、その結果をログ出力する方法を示しています。
HTML
HTML は、ポップオーバーと、その開閉を切り替えるボタンで構成されています。
<button popovertarget="mypopover">ポップオーバーを開閉</button>
<div id="mypopover" popover>ポップオーバーの中身</div>
JavaScript
このコードは、beforetoggle イベントのイベントリスナーを追加し、状態をログ出力します。
const popover = document.getElementById("mypopover");
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
log("ポップオーバーが開かれようとしています");
} else {
log("ポップオーバーが閉じられようとしています");
}
});
結果
ポップオーバーが開くのを防ぐ
要素を開いた際に beforetoggle イベントが発生した場合、そのイベントはキャンセル可能です。
以下で、ポップオーバーがまず表示が許可されているかどうかを確認し、許可されていない場合は Event.preventDefault() を呼び出してイベントをキャンセルする方法を示します。
この例では、ポップオーバーを表示できるかどうかをチェックボックスで設定していますが、より「機能の充実した」例では、アプリケーションの状態や、ポップオーバー内のデータが表示可能な状態にあるかどうかに依存する場合もあります。
HTML
HTML は、ポップオーバー、ポップオーバーの表示・非表示を切り替えるボタン、およびポップオーバーを開くことができるかどうかを設定するチェックボックスで構成されています。
<button popovertarget="mypopover">ポップオーバーを開閉</button>
<label for="allow-popover">
開くのを許可する <input type="checkbox" id="allow-popover" checked />
</label>
<div id="mypopover" popover>ポップオーバーの中身</div>
JavaScript
まず、ポップオーバーを開くことができる状態をシミュレートするためのコードを設定します。
これは変数 allowOpen で表し、関連付けられたチェックボックスがオン／オフに切り替わると、この変数の値も切り替わります。
const allowCheckbox = document.getElementById("allow-popover");
let allowOpen = true;
allowCheckbox.addEventListener("change", (event) => {
allowOpen = allowCheckbox.checked;
});
このコードは、beforetoggle イベントのイベントリスナーを追加します。
allowOpen が false の場合、preventDefault() が呼び出され、ポップアップが開くのを阻止します。
const popover = document.getElementById("mypopover");
popover.addEventListener("beforetoggle", (event) => {
if (event.newState === "open") {
if (allowOpen) {
log("ポップオーバーが開かれようとしています");
} else {
log("ポップオーバーが開くのを防がれました");
event.preventDefault();
}
} else {
log("ポップオーバーを非表示にしようとしています");
}
});
結果
その他の例
- モーダルダイアログを開く例が
HTMLDialogElementにあります。
仕様書
| 仕様書 |
|---|
| HTML # event-beforetoggle |
ブラウザーの互換性
関連情報
- HTML の
popoverグローバル属性 - ポップオーバー API
- 関連イベント:
toggle