HTMLDialogElement: cancel event - Web APIs

HTMLDialogElement: cancel event - Web APIs | MDN

Syntax

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

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

oncancel = (event) => { }

Examples

Canceling a dialog

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;
}

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 cancelled");
  // event.preventDefault();
});

dialog.addEventListener("close", (event) => {
  log("dialog close event fired");
});

Result

Specifications

Specification
HTML # event-cancel
HTML # handler-oncancel

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on Jan 26, 2026 by MDN contributors.