HTMLDialogElement : événement cancel

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis 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.

Dans cet article

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.

js
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

js
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();
});