HTMLDialogElement: cancel-Ereignis

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨März 2022⁩.

Das cancel-Ereignis wird auf einem <dialog>-Element ausgelöst, wenn der Benutzer den Browser anweist, das aktuell geöffnete Dialogfeld zu schließen. Der Browser löst dieses Ereignis aus, wenn der Benutzer die Taste Esc drückt.

Dieses Ereignis ist abbruchbar, kann aber nicht gebubbelt werden.

Wenn ein <dialog> mit der Esc-Taste geschlossen wird, werden sowohl das cancel- als auch das close-Ereignis ausgelöst.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder legen Sie eine Ereignishandler-Eigenschaft fest.

addEventListener("cancel", (event) => { })

oncancel = (event) => { }

HTML

html

<dialog class="example-dialog">
  <button class="close">Close</button>
</dialog>

<button class="open-dialog">Open dialog</button>

<div class="result"></div>

button,
div {
  margin: 0.5rem;
}

JavaScript

const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");

dialog.addEventListener("cancel", (event) => {
  result.textContent = "dialog was canceled";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
    result.textContent = "";
  } else {
    result.textContent = "The dialog API is not supported by this browser";
  }
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});