Actions par Défaut du Navigateur

Comprendre et Gérer les Actions par Défaut du Navigateur en JavaScript

En développement web, les navigateurs effectuent certaines actions par défaut en réponse aux interactions utilisateur. Cliquer sur un lien navigue vers une nouvelle page, soumettre un formulaire envoie ses données à un serveur, et un clic droit ouvre un menu contextuel — tout cela sans aucun JavaScript. JavaScript vous permet d'intercepter ces comportements intégrés afin de les remplacer, d'augmenter ou d'annuler.

Ce chapitre traite de ce que sont les actions par défaut, de la façon d'en annuler une avec event.preventDefault(), de la différence entre empêcher l'action par défaut et arrêter la propagation, de la vérification si une action par défaut a déjà été empêchée, ainsi que des pièges courants (écouteurs passifs, événements non annulables et le pattern historique return false). Si les événements sont encore nouveaux pour vous, commencez par Introduction aux Événements du Navigateur.

Que sont les Actions par Défaut du Navigateur ?

Une action par défaut est un comportement que le navigateur exécute automatiquement lorsqu'un événement se déclenche, sans aucun gestionnaire de votre part. Exemples courants :

• Naviguer vers une URL lorsqu'un lien <a> est cliqué.
• Soumettre (et recharger la page) lorsque le bouton de soumission d'un formulaire est pressé.
• Afficher le menu contextuel natif lors d'un clic droit (contextmenu).
• Faire défiler la page lorsque vous appuyez sur la barre d'espace ou les touches fléchées.
• Sélectionner du texte lors du mousedown et le faire glisser lors du dragstart.
• Cocher une case ou suivre un label lorsqu'il est cliqué.

De nombreux gestionnaires s'exécutent avant l'action par défaut : le navigateur déclenche d'abord votre gestionnaire click/submit/keydown, puis exécute son comportement intégré. Cet ordonnancement est ce qui permet d'annuler l'action par défaut depuis l'intérieur du gestionnaire.

Empêcher les Actions par Défaut

Pour arrêter le comportement par défaut du navigateur, appelez event.preventDefault() à l'intérieur du gestionnaire. Une fois appelée, le navigateur saute l'action intégrée pour cet événement — mais votre gestionnaire continue jusqu'à la fin et l'événement se propage toujours (remonte) sauf si vous l'arrêtez également.

Remarque : Ne confondez pas preventDefault() avec stopPropagation(). preventDefault() annule l'action par défaut (navigation, soumission, défilement). stopPropagation() empêche l'événement de remonter vers les éléments parents — voir Bouillonnement et Capture. Ils sont indépendants : annuler l'action par défaut n'arrête pas le bouillonnement, et arrêter le bouillonnement n'annule pas l'action par défaut.

Exemple JavaScript : Empêcher l'Ouverture d'un Lien

<a href="https://www.example.com" id="myLink">Go to Example.com</a>

<script>
  document.getElementById('myLink').addEventListener('click', function(event) {
    event.preventDefault();  // Stops the default link behavior
    alert('Default action prevented! Link will not open.');
  });
</script>

Explication :

• Écouteur d'Événement : Attache un écouteur d'événement click à un lien.
• Empêcher l'Action par Défaut : La méthode preventDefault() est appelée sur l'objet événement, empêchant le navigateur de naviguer vers l'URL spécifiée dans l'attribut href.

Exemple Plus Complexe : Gestion de la Soumission de Formulaire

Considérez un formulaire où vous souhaitez valider la saisie avant d'autoriser la soumission du formulaire. Si la validation échoue, vous empêchez le formulaire d'être soumis. Pour un examen approfondi de l'événement submit, voir Formulaires : événement et méthode submit.

<form id="myForm">
  Enter your name: <input type="text" name="username" required>
  <input type="submit" value="Submit">
</form>
<div id="formFeedback"></div>

<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    var input = this.elements.username.value;
    if (input.length < 4) {
      event.preventDefault();  // Prevent form from submitting
      document.getElementById('formFeedback').textContent = 'Name must be at least 4 characters long.';
    } else {
      document.getElementById('formFeedback').textContent = 'Form submitted successfully!';
    }
  });
</script>

Explication :

• Écouteur d'Événement de Formulaire : Un écouteur d'événement est attaché à l'événement submit d'un formulaire.
• Validation : Vérifie si le nom d'utilisateur comporte au moins 4 caractères.
• Retour : Fournit un retour immédiat sur la page. Si la validation échoue, elle empêche la soumission du formulaire.

Exemple : Menu Contextuel Personnalisé

Les applications web peuvent utiliser des menus contextuels personnalisés pour améliorer les fonctionnalités. En empêchant le menu de clic droit par défaut, vous pouvez afficher un menu personnalisé avec des options pertinentes pour votre application. (L'événement contextmenu est déclenché par le clic droit — voir Bases des Événements Souris pour les événements de pointeur associés.)

<div id="contextArea" style="width: 300px; height: 200px; background-color: #f0f0f0; margin-bottom: 10px;">
    Right-click on me
</div>
<ul id="customMenu" style="display: none; list-style: none; padding: 10px; background-color: white; border: 1px solid black; position: absolute;">
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>

<script>
document.getElementById('contextArea').addEventListener('contextmenu', function(event) {
    event.preventDefault();  // Prevent the default context menu
    var menu = document.getElementById('customMenu');
    menu.style.display = 'block';
    menu.style.left = event.clientX + 'px';
    menu.style.top = event.clientY + 'px';
});

document.addEventListener('click', function(event) {
    document.getElementById('customMenu').style.display = 'none';
});
</script>

Explication :

• Menu Contextuel : L'événement contextmenu est utilisé pour déclencher un menu personnalisé, et event.preventDefault() empêche l'affichage du menu contextuel par défaut du navigateur.
• Positionnement : Le menu personnalisé est positionné en fonction des coordonnées de la souris (event.clientX et event.clientY).
• Clic Global : Un écouteur de clic global masque le menu lorsqu'on clique n'importe où ailleurs sur la page.

Vérifier si l'Action par Défaut a Déjà été Empêchée

Après l'exécution d'un gestionnaire, vous pouvez lire event.defaultPrevented pour savoir si un gestionnaire a déjà appelé preventDefault(). Cela est utile lorsque plusieurs gestionnaires écoutent le même événement et qu'un gestionnaire ultérieur ne devrait pas agir si un gestionnaire antérieur a déjà annulé l'action par défaut.

const link = document.createElement('a');
link.href = 'https://example.com';

link.addEventListener('click', (event) => {
  event.preventDefault();
});

link.addEventListener('click', (event) => {
  console.log(event.defaultPrevented); // true
});

// Simulate a click on the link
link.dispatchEvent(new Event('click', { cancelable: true }));

Le deuxième gestionnaire affiche true car le premier a déjà empêché l'action par défaut.

Tous les Événements Ne Peuvent Pas Être Empêchés

Seuls les événements annulables ont une action par défaut que vous pouvez arrêter. Vous pouvez vérifier event.cancelable avant de vous fier à preventDefault(). Des événements tels que scroll et DOMContentLoaded ne sont pas annulables, donc appeler preventDefault() sur eux ne fait rien.

const evt = new Event('myevent', { cancelable: true });
console.log(evt.cancelable);      // true
evt.preventDefault();
console.log(evt.defaultPrevented); // true

const evt2 = new Event('myevent', { cancelable: false });
evt2.preventDefault();
console.log(evt2.defaultPrevented); // false — could not be prevented

Les Écouteurs Passifs Ne Peuvent Pas Empêcher l'Action par Défaut

Pour des raisons de performance, les événements liés au défilement (touchstart, touchmove, wheel) peuvent être enregistrés comme passifs. Un écouteur passif promet de ne pas appeler preventDefault(), ce qui permet au navigateur de défiler sans attendre votre code. Si vous appelez preventDefault() à l'intérieur d'un écouteur passif, l'appel est ignoré et la console affiche un avertissement.

element.addEventListener('touchmove', (event) => {
  // This call is ignored because the listener is passive.
  event.preventDefault();
}, { passive: true });

Si vous avez vraiment besoin d'annuler le défilement, enregistrez l'écouteur avec { passive: false }.

Éviter le Pattern Historique return false

Dans les anciens gestionnaires en ligne, vous pouvez voir onclick="return false" utilisé pour annuler l'action par défaut. Dans un callback addEventListener, retourner false ne fait rien — seul event.preventDefault() fonctionne là. Préférez preventDefault() partout pour la clarté et la cohérence.

<!-- Legacy inline form (works, but discouraged) -->
<a href="https://example.com" onclick="return false">Blocked</a>

<!-- Modern, recommended form -->
<script>
  document.querySelector('a').addEventListener('click', (event) => {
    event.preventDefault();
  });
</script>

Conclusion

La gestion des actions par défaut du navigateur est un outil puissant en développement web, permettant un comportement personnalisé et un contrôle accru sur les interactions utilisateur. Qu'il s'agisse d'empêcher l'ouverture d'un lien, d'arrêter la soumission d'un formulaire ou de toute autre action par défaut, event.preventDefault() est essentiel pour adapter l'expérience utilisateur aux exigences spécifiques de l'application. En comprenant et en utilisant cette méthode, les développeurs peuvent créer des applications web plus interactives et conviviales.

Practice