HTMLDialogElement : événement cancel

Baseline Widely available

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énementcancel 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énementscancel etclose sont tous deux déclenchés.

Syntaxe

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

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

HTML

html

<dialog>  <button>Fermer</button></dialog><button>Ouvrir la boîte de dialogue</button><div></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();});