HTMLDialogElement: cancel イベント
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.
cancel は <dialog> 要素で発生するイベントで、ユーザーがブラウザーに対して現在のダイアログを閉じるよう指示した際に発行されます。ブラウザーは、ユーザーが Esc キーを押したときにこのイベントを発行します。
このイベントはキャンセル不可で、バブリングしません。
<dialog> が Esc キーで閉じられた時、 cancel および close イベントの両方が発生します。
構文
このイベント名を addEventListener() などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。
js
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
イベント型
一般的な Event です。
例
ダイアログをキャンセル
HTML
html
<dialog class="example-dialog">
<button class="close">閉じる</button>
</dialog>
<button class="open-dialog">ダイアログを開く</button>
<div class="result"></div>
JavaScript
js
const result = document.querySelector(".result");
const dialog = document.querySelector(".example-dialog");
dialog.addEventListener("cancel", (event) => {
result.textContent = "ダイアログがキャンセルされました";
});
const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
if (typeof dialog.showModal === "function") {
dialog.showModal();
result.textContent = "";
} else {
result.textContent = "このブラウザーではダイアログ API に未対応です";
}
});
const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
dialog.close();
});
結果
仕様書
| Specification |
|---|
| HTML # event-cancel |
| HTML # handler-oncancel |
ブラウザーの互換性
Loading…
関連情報
- HTML の
<dialog>要素