GeezerVison is showing developer.mozilla.org — HTMLDialogElement: cancel event - Web APIs | MDN
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.
The cancel event fires on a <dialog> element when the user triggers a close request.
The cancel event handler can be used to override the default behavior on receiving a close request, and prevent the dialog from closing.
If the default behavior is not prevented, the dialog will close and fire a close event.
Close requests might be triggered by:
- Pressing the Esc key on desktop platforms
- Calling the
requestClose() method
- The back button on mobile platforms
This event is cancelable and does not bubble.
The following example shows a button that, when clicked, opens a <dialog> using the showModal() method.
You can trigger the cancel event by either clicking the Request Close button to close the dialog (via the requestClose() method) or by pressing the Esc key.
Note that the cancel event handler logs the event and then returns, allowing the dialog to close (which in turn causes the close event to be emitted).
You can uncomment the line containing event.preventDefault() to cancel the event.
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;
}
js
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");
});
Result