HTMLDialogElement: событие cancel

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с марта 2022 года.

Событие cancel срабатывает на элементе <dialog>, когда пользователь указывает браузеру, что хочет закрыть текущий диалог. Браузер вызывает это событие, когда пользователь нажимает клавишу Esc.

Это событие может быть отменено, но не может «подняться» вверх по DOM.

При закрытии <dialog> с помощью клавиши Esc, срабатывают как событие cancel , так и событие close.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

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

oncancel = (event) => {};

Тип события

Общее событие Event.

Примеры

Отмена диалога

HTML

<dialog class="example-dialog">
  <button class="close" type="reset">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();
});

Результат

Спецификации

Спецификация
HTML # event-cancel
HTML # handler-oncancel

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`cancel_event`	37	79	98	24	15.4	37	98	24	15.4	3.0	37

См. также

Элемент HTML <dialog>

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/cancel_event