HTMLDialogElement: cancel-Ereignis

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit März 2022 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Das cancel-Ereignis wird auf einem <dialog>-Element ausgelöst, wenn der Benutzer eine Schließanforderung auslöst.

Mit dem Event-Handler für cancel können Sie das Standardverhalten bei einer Schließanforderung außer Kraft setzen und verhindern, dass der Dialog geschlossen wird. Wird das Standardverhalten nicht verhindert, wird der Dialog geschlossen und ein close-Ereignis ausgelöst.

Schließanforderungen können ausgelöst werden durch:

Drücken der Esc-Taste auf Desktop-Plattformen
Aufrufen der Methode requestClose()
Betätigen der Zurück-Schaltfläche auf mobilen Plattformen

Dieses Ereignis kann abgebrochen werden und wird nicht nach oben weitergegeben.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

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

Alternativ können Sie den Event-Handler der Event-Handler-Eigenschaft der Schnittstelle zuweisen:

oncancel = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Schließen eines Dialogs verhindern

Das folgende Beispiel zeigt eine Schaltfläche, die beim Anklicken mit der Methode showModal() einen <dialog> öffnet.

Sie können das cancel-Ereignis auslösen, indem Sie entweder auf die Schaltfläche Request Close klicken, um den Dialog zu schließen (über die Methode requestClose()), oder die Esc-Taste drücken.

Beachten Sie, dass der Event-Handler für cancel das Ereignis protokolliert und dann zurückkehrt, sodass der Dialog geschlossen werden kann (wodurch wiederum das close-Ereignis ausgelöst wird). Sie können die Auskommentierung der Zeile mit event.preventDefault() entfernen, um das Ereignis abzubrechen.

HTML

html

<dialog id="dialog">
  <button type="button" id="request-close">Request Close</button>
</dialog>

<button id="open">Open dialog</button>

<pre id="log"></pre>

#log {
  height: 170px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

JavaScript

const logElement = document.getElementById("log");
function log(text, clear = false) {
  if (clear) {
    logElement.innerText = "";
  }
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

const dialog = document.getElementById("dialog");
const openButton = document.getElementById("open");
const requestCloseButton = document.getElementById("request-close");

// Open button opens a modal dialog
openButton.addEventListener("click", () => {
  log("open button click event fired", true);
  log("dialog showModal() called");
  dialog.showModal();
});

// Request close
requestCloseButton.addEventListener("click", () => {
  log("request close button click event fired");
  log("dialog requestClose() called");
  // Triggers the cancel event
  dialog.requestClose();
});

// Fired when requestClose() is called
// Prevent the dialog from closing by calling event.preventDefault()
dialog.addEventListener("cancel", (event) => {
  log("dialog cancel event fired");
  // Uncomment the next two lines to prevent the dialog from closing
  // log("dialog close canceled");
  // event.preventDefault();
});

dialog.addEventListener("close", (event) => {
  log("dialog close event fired");
});

Ergebnis

Spezifikationen

Spezifikation
HTML # event-cancel
HTML # handler-oncancel

Browser-Kompatibilität

Siehe auch

HTML-Element <dialog>

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden