Baseline Widely available
The cancel event fires on a <dialog> element when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key.
This event is cancelable but can not bubble.
When a <dialog> is dismissed with the Esc key, both the cancel and close events are fired.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("cancel", (event) => { })
oncancel = (event) => { }
A generic Event.
<dialog class="example-dialog">
<button class="close">Close</button>
</dialog>
<button class="open-dialog">Open dialog</button>
<div class="result"></div>
button,
div {
margin: 0.5rem;
}
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();
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3