HTMLDialogElement: cancel event

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 bei einem <dialog>-Element ausgelöst, wenn der Benutzer eine Anforderung zum Schließen auslöst.

Der cancel-Ereignishandler kann verwendet werden, um das Standardverhalten beim Erhalt einer Schließanforderung zu überschreiben und zu verhindern, dass der Dialog geschlossen wird. Wenn das Standardverhalten nicht verhindert wird, 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()
Die Zurück-Taste auf mobilen Plattformen

Dieses Ereignis kann abgebrochen werden und wird nicht weitergeleitet.

Syntax

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

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

oncancel = (event) => { }

Ereignistyp

Ein generisches Event.

Beispiele

Einen Dialog abbrechen

Das folgende Beispiel zeigt einen Button, der bei Klick einen <dialog> mit der Methode showModal() ö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 indem Sie die Esc-Taste drücken.

Beachten Sie, dass der cancel-Ereignishandler das Ereignis protokolliert und dann zurückkehrt, wodurch der Dialog geschlossen wird (was wiederum das close-Ereignis auslöst). Sie können die Zeile, die event.preventDefault() enthält, auskommentieren, 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-<dialog>-Element

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