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.

Thecancel event fires on a<dialog> element when the user triggers a close request.

Thecancel 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 aclose event.

Close requests might be triggered by:

Pressing theEsc key on desktop platforms
Calling therequestClose() method
The back button on mobile platforms

This event is cancelable and does not bubble.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

addEventListener("cancel", (event) => { })oncancel = (event) => { }

Event type

A genericEvent.

Examples

Canceling a dialog

The following example shows a button that, when clicked, opens a<dialog> using theshowModal() method.

You can trigger thecancel event by either clicking theRequest Close button to close the dialog (via therequestClose() method) or by pressing theEsc key.

Note that thecancel event handler logs the event and then returns, allowing the dialog to close (which in turn causes theclose event to be emitted).You can uncomment the line containingevent.preventDefault() to cancel the event.

HTML

html

<dialog>  <button type="button">Request Close</button></dialog><button>Open dialog</button>

<pre></pre>

#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 dialogopenButton.addEventListener("click", () => {  log("open button click event fired", true);  log("dialog showModal() called");  dialog.showModal();});// Request closerequestCloseButton.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");});