event.preventDefault() vs return false : Comment ne pas casser votre JavaScript

Introduction : Pourquoi ce sujet fait-il exploser Stack Overflow ?

Si vous avez déjà écrit en JavaScript un gestionnaire de clic sur un lien ou une soumission de formulaire, vous avez sûrement rencontré une situation où le navigateur fait quelque chose tout seul, ignorant votre logique. Vous écrivez alert('Bonjour !') sur un clic de lien, et le navigateur insiste pour aller sur une autre page. Ça vous dit quelque chose ?

C'est ici qu'entrent en scène deux méthodes légendaires : event.preventDefault() et return false. La question "Que choisir ?" est l'une des plus populaires sur Stack Overflow avec des dizaines de milliers de vues. Et ce n'est pas pour rien : la différence entre elles est critique, et un mauvais choix peut entraîner des bugs difficiles à détecter.

Dans cet article, nous allons une fois pour toutes comprendre :

\n
• Ce qu'est "l'action par défaut" dans le navigateur
\n
• Comment fonctionnent les deux méthodes
\n
• La principale différence qui a cassé le code de milliers de développeurs
\n
• Quand utiliser chacune d'elles
\n
• Pourquoi return false n'est pas toujours un mal
\n

Prêts ? C'est parti !

1. Qu'est-ce que "l'action par défaut" ?

Avant de parler des méthodes, voyons ce que nous annulons. Le navigateur est une machine intelligente avec un comportement intégré pour de nombreux éléments HTML :

\n
• Lien (<a>) : par défaut, il navigue vers l'URL de l'attribut href.
\n
• Formulaire (<form>) : par défaut, il envoie les données au serveur et recharge la page.
\n
• Bouton d'envoi (<input type="submit">) : soumet le formulaire.
\n
• Menu contextuel (clic droit) : affiche le menu du navigateur.
\n

Parfois, ce comportement nous est utile — par exemple, quand l'utilisateur veut vraiment suivre un lien. Mais souvent, nous voulons intercepter cette action et exécuter notre propre logique : valider un formulaire avant l'envoi, ouvrir un lien dans une fenêtre modale, afficher un menu contextuel personnalisé.

C'est exactement à cela que servent nos héros.

2. event.preventDefault() — la méthode élégante

C'est une méthode de l'objet événement (event). Elle fait exactement une chose : annule l'action par défaut du navigateur.

// Exemple 1 : Annulation de la navigation sur un lien\ndocument.querySelector('a').addEventListener('click', function(event) {\n    event.preventDefault();\n    alert('Le lien n'a pas fonctionné ! Je l'ai annulé.');\n});\n\n// Exemple 2 : Annulation de la soumission d'un formulaire\ndocument.querySelector('form').addEventListener('submit', function(event) {\n    event.preventDefault();\n    // Maintenant, le formulaire ne rechargera pas la page\n    // On peut faire une requête AJAX ou une validation\n    console.log('Le formulaire n'a pas été soumis. Vérification des données...');\n});\n

Notez que preventDefault() n'arrête pas la propagation de l'événement. Si vous avez des gestionnaires imbriqués, l'événement continuera à "remonter" dans l'arbre DOM.

Il est important de comprendre cela : si vous voulez à la fois annuler l'action et arrêter la propagation, vous devez appeler les deux méthodes : preventDefault() et stopPropagation().

3. return false — un vieil ami dangereux

Quant à return false, c'est une bête un peu plus complexe. Tout dépend de comment vous ajoutez le gestionnaire.

Cas 1 : Attributs HTML (onclick)

Dans les temps anciens (et encore aujourd'hui dans du code ancien), les gestionnaires étaient attachés directement dans le HTML :

<a href="https://example.com" onclick="return false;">Cliquez-moi</a>\n\n<form onsubmit="return validateForm();">\n    <input type="submit" value="Envoyer">\n</form>\n\n<script>\nfunction validateForm() {\n    // Si on retourne false — le formulaire ne sera pas soumis\n    // Si true — il sera soumis\n    return false;\n}\n</script>\n

Dans