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>

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