HTMLDialogElement: cancel event
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 wird auf einem <dialog>
-Element ausgelöst, wenn der Benutzer dem Browser mitteilt, dass er den aktuell geöffneten Dialog schließen möchte. Der Browser löst dieses Ereignis aus, wenn der Benutzer die Esc-Taste drückt.
Dieses Ereignis ist abfangbar, kann jedoch nicht weitergeleitet werden.
Wenn ein <dialog>
mit der Esc-Taste geschlossen wird, werden sowohl das cancel
- als auch das close
-Ereignis ausgelöst.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
, oder legen Sie eine Ereignis-Handler-Eigenschaft fest.
addEventListener("cancel", (event) => {});
oncancel = (event) => {};
Ereignistyp
Ein generisches Event
.
Beispiele
Einen Dialog abbrechen
HTML
<dialog class="example-dialog">
<button class="close">Close</button>
</dialog>
<button class="open-dialog">Open dialog</button>
<div class="result"></div>
JavaScript
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 # event-cancel |
HTML # handler-oncancel |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
cancel event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- HTML
<dialog>
-Element