HTMLDialogElement : événement cancel

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨mars 2022⁩.

L'événement cancel est déclenché sur un élément <dialog> lorsque l'utilisateur·ice indique au navigateur qu'il·elle souhaite fermer la boîte de dialogue actuellement ouverte. Le navigateur déclenche cet événement lorsque l'utilisateur·ice appuie sur la touche Échap.

Cet événement est annulable mais ne se propage (« bubbles » en anglais) pas.

Lorsque la boîte de dialogue <dialog> est fermée avec la touche Échap, les événements cancel et close sont tous deux déclenchés.

Syntaxe

Utilisez le nom de l'événement dans des méthodes comme addEventListener(), ou définissez une propriété de gestionnaire d'événement.

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

oncancel = (event) => { }

HTML

html

<dialog class="example-dialog">
  <button class="close">Fermer</button>
</dialog>

<button class="open-dialog">Ouvrir la boîte de dialogue</button>

<div class="result"></div>

button,
div {
  margin: 0.5rem;
}

JavaScript

const result = document.querySelector(".result");

const dialog = document.querySelector(".example-dialog");

dialog.addEventListener("cancel", (event) => {
  result.textContent = "La boîte de dialogue a été annulée";
});

const openDialog = document.querySelector(".open-dialog");
openDialog.addEventListener("click", () => {
  if (typeof dialog.showModal === "function") {
    dialog.showModal();
    result.textContent = "";
  } else {
    result.textContent =
      "L'API dialog n'est pas prise en charge par ce navigateur";
  }
});

const closeButton = document.querySelector(".close");
closeButton.addEventListener("click", () => {
  dialog.close();
});