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 March 2022.

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

Dieses Ereignis kann abgebrochen werden, kann jedoch nicht blubbern.

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

Syntax

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

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

oncancel = (event) => {};

Ereignistyp

Ein generisches Event.

Beispiele

Abbrechen eines Dialogs

HTML

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

<button class="open-dialog">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 = "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();
});

Ergebnis

Spezifikationen

Specification
HTML Standard
# event-cancel
HTML Standard
# handler-oncancel

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch