HTMLDialogElement: cancel イベント

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。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>

button,
div {
  margin: 0.5rem;
}

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();
});