Cliquer sur un lien change de page. Envoyer un formulaire recharge la page. Ces réactions n'ont pas été écrites, elles appartiennent au navigateur.
Quand une interface prend le relais, il faut pouvoir les désactiver, une par une et au bon moment.
Définition
preventDefault est une méthode de l'objet événement qui annule l'action prévue par le navigateur pour cet événement. Elle n'interrompt pas la propagation : les écouteurs suivants s'exécutent normalement.
const formulaire = document.querySelector("#inscription");
formulaire.addEventListener("submit", (event) => {
event.preventDefault(); // la page ne se recharge pas
console.log(new FormData(formulaire).get("email"));
});C'est le socle de toute soumission traitée en JavaScript : la ligne annule le rechargement, le reste de la fonction envoie les données avec fetch() et met l'affichage à jour.
Les actions couramment annulées
| Événement | Action annulée |
|---|---|
submit | L'envoi du formulaire et le rechargement de la page |
click sur un lien | La navigation vers l'adresse du lien |
contextmenu | L'ouverture du menu contextuel |
dragover | Le refus par défaut du dépôt de fichier |
keydown | La saisie du caractère dans le champ |
Tous les événements ne sont pas annulables. La propriété event.cancelable le dit, et un appel sur un événement non annulable ne produit rien du tout.
Le piège des écouteurs passifs
Pour que le défilement reste fluide, les navigateurs traitent par défaut touchstart, touchmove et wheel comme passifs lorsque l'écouteur est posé sur window, document ou le corps de la page. Dans ce cas l'annulation est ignorée, avec un avertissement en console.
document.addEventListener("wheel", (event) => {
event.preventDefault(); // effectif grâce à l'option ci-dessous
}, { passive: false });Bloquer le défilement d'une page dégrade l'expérience et parfois l'accessibilité. Avant d'écrire cet appel, vérifiez qu'une propriété CSS comme overscroll-behavior ne répond pas au besoin.
Savoir si l'action a été annulée
La propriété event.defaultPrevented rend true dès qu'un écouteur a appelé la méthode. Un écouteur situé plus haut peut ainsi constater qu'un autre a déjà pris la main et s'abstenir.
Questions fréquentes
Quelle différence avec stopPropagation ?
Les deux méthodes ne touchent pas au même mécanisme. preventDefault annule ce que le navigateur allait faire, sans modifier le trajet de l'événement. stopPropagation arrête ce trajet, sans empêcher l'action par défaut. Le sujet est détaillé dans Propagation d'événement.
Pourquoi la page se recharge-t-elle malgré l'appel ?
Trois causes couvrent presque tous les cas : une erreur levée avant la ligne, qui interrompt la fonction, un écouteur posé sur le bouton au lieu du formulaire, ou l'événement click écouté là où submit était attendu. La console tranche en quelques secondes.
return false suffit-il ?
Seulement dans un attribut HTML de la forme onsubmit, une écriture qu'il vaut mieux ne plus employer. Dans une fonction passée à addEventListener(), la valeur de retour est ignorée : le return quitte la fonction et rien d'autre.