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.
Das cancel-Ereignis wird auf einem <dialog>-Element ausgelöst, wenn der Benutzer eine Schließanfrage auslöst.
Mit dem Event-Handler für cancel können Sie das Standardverhalten bei einer Schließanfrage überschreiben und verhindern, dass der Dialog geschlossen wird.
Wird das Standardverhalten nicht verhindert, schließt sich der Dialog und löst ein close-Ereignis aus.
Schließanfragen können ausgelöst werden durch:
- Drücken der Esc-Taste auf Desktop-Plattformen
- Aufrufen der Methode
requestClose() - Betätigen der Zurück-Taste auf mobilen Plattformen
Das Ereignis wird nicht weitergegeben (Bubbling). Ob es abgebrochen werden kann, hängt davon ab, wie die Schließanfrage ausgelöst wurde.
Aufrufe von requestClose() lösen ein abbrechbares Ereignis aus.
Schließanfragen der Plattform, etwa durch Drücken von Esc, können nur dann abgebrochen werden, wenn dies durch eine Benutzeraktivierung erlaubt ist.
Wenn eine Schließanfrage der Plattform abgebrochen wird, kann eine nachfolgende Schließanfrage ohne zwischenzeitliche Benutzeraktivierung ein nicht abbrechbares cancel-Ereignis auslösen und den Dialog schließen.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("cancel", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
oncancel = (event) => { }
Ereignistyp
Ein generisches Event.
Beispiele
Schließen eines Dialogs abbrechen
Das folgende Beispiel zeigt eine Schaltfläche, die beim Anklicken einen <dialog> mithilfe der Methode showModal() öffnet.
Sie können das cancel-Ereignis auslösen, indem Sie entweder auf die Schaltfläche Schließen anfordern klicken, um den Dialog über die Methode requestClose() zu schließen, oder die Esc-Taste drücken.
Beachten Sie, dass der Event-Handler für cancel das Ereignis protokolliert und dann zurückkehrt, sodass sich der Dialog schließen kann (wodurch wiederum das close-Ereignis ausgelöst wird).
Wenn das Ereignis abgebrochen werden kann, können Sie die Zeile mit event.preventDefault() einkommentieren, um es abzubrechen.
Das Beispiel protokolliert außerdem den Wert von event.cancelable, sodass Sie erkennen können, wann eine Schließanfrage der Plattform nicht abgebrochen werden kann.
HTML
<dialog id="dialog">
<button type="button" id="request-close">Request Close</button>
</dialog>
<button id="open">Open dialog</button>
JavaScript
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 a close request is received
dialog.addEventListener("cancel", (event) => {
log(`dialog cancel event fired (cancelable: ${event.cancelable})`);
if (event.cancelable) {
// 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>