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 déclenche une demande de fermeture.
Le gestionnaire d'évènement cancel peut être utilisé pour remplacer le comportement par défaut lors de la réception d'une demande de fermeture et empêcher la boîte de dialogue de se fermer.
Si le comportement par défaut n'est pas annulé, la boîte de dialogue se ferme et déclenche un évènement close.
Si le comportement par défaut n'est pas annulé, la boîte de dialogue se ferme et déclenche un évènement close.
Les demandes de fermeture peuvent être déclenchées par :
- Appuyer sur la touche Échap sur les plateformes de bureau
- Appeler la méthode
requestClose() - Le bouton retour sur les plateformes mobiles
Cet évènement est annulable mais ne se propage pas.
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) => { }
Type d'évènement
Un évènement Event générique.
Exemples
Annuler une boîte de dialogue
L'exemple suivant montre un bouton qui, lorsqu'il est cliqué, ouvre un <dialog> en utilisant la méthode showModal().
Vous pouvez déclencher l'évènement cancel en cliquant soit sur le bouton Demander la fermeture pour fermer la boîte de dialogue (avec la méthode requestClose()) ou en appuyant sur la touche Échap.
Remarquez que le gestionnaire d'évènement cancel enregistre l'évènement puis retourne, permettant à la boîte de dialogue de se fermer (ce qui à son tour déclenche l'évènement close).
Vous pouvez supprimer le commentaire de la ligne contenant event.preventDefault() pour annuler l'évènement.
HTML
<dialog id="dialogue">
<button type="button" id="demande-fermeture">Demander la fermeture</button>
</dialog>
<button id="ouvrir">Ouvrir la boîte de dialogue</button>
JavaScript
const dialogue = document.getElementById("dialogue");
const boutonOuvrir = document.getElementById("ouvrir");
const boutonDemandeFermeture = document.getElementById("demande-fermeture");
// Le bouton Ouvrir ouvre une boîte de dialogue bloquante
boutonOuvrir.addEventListener("click", () => {
journaliser("bouton ouvrir cliqué", true);
journaliser("showModal() du dialogue appelé");
dialogue.showModal();
});
// Demande de fermeture
boutonDemandeFermeture.addEventListener("click", () => {
journaliser("bouton demander la fermeture cliqué");
journaliser("requestClose() du dialogue appelé");
// Déclenche l'évènement cancel
dialogue.requestClose();
});
// Déclenché lorsque requestClose() est appelé
// Empêche la fermeture de la boîte de dialogue en appelant event.preventDefault()
dialogue.addEventListener("cancel", (event) => {
journaliser("évènement cancel du dialogue déclenché");
// Supprimez les commentaires des deux lignes suivantes pour empêcher la fermeture du dialogue
// journaliser("fermeture du dialogue annulée");
// event.preventDefault();
});
dialogue.addEventListener("close", (event) => {
journaliser("évènement close du dialogue déclenché");
});
Résultat
Spécifications
| Spécification |
|---|
| HTML # event-cancel |
| HTML # handler-oncancel |
Compatibilité des navigateurs
Voir aussi
- Élément HTML implémentant cette interface :