HTMLDialogElement: cancel Ereignis - Web-APIs

HTMLDialogElement: cancel Ereignis - Web-APIs | MDN

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.

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

Der cancel-Ereignishandler kann verwendet werden, um das Standardverhalten beim Empfang einer Schließen-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ßen-Anforderungen können durch folgende Aktionen ausgelöst werden:

Drücken der Esc-Taste auf Desktop-Plattformen
Aufrufen der Methode requestClose()
Die Zurück-Taste auf mobilen Plattformen

Dieses Ereignis ist abbruchfähig und wird nicht hochgebubbelt.

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> mittels der Methode showModal() öffnet.

Sie können das cancel-Ereignis auslösen, indem Sie entweder den Request Close-Button anklicken, 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ückgibt, 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>

#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 cancelled");
  // 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.