Erreur de navigation par lien en JavaScript

Analysons une erreur liée à une navigation inattendue par lien. Prenons par exemple le lien suivant :

<a href="">link</a>

Récupérons notre lien dans une variable :

let link = document.querySelector('a');

Attachons un gestionnaire de clic à notre lien :

link.addEventListener('click', function() {
	console.log(this.textContent);
});

Et c'est ici que nous attend une surprise. Le code est écrit correctement, cependant, la sortie dans la console n'apparaît pas. Le fait est qu'un clic entraîne une navigation via le lien. Comme rien n'est spécifié dans l'attribut href, le lien mène simplement à la page actuelle.

Cela signifie qu'un clic sur le lien provoque un rechargement de la page. C'est-à-dire que nos données sont affichées dans la console, puis la page se recharge, et la console devient vide.

Si on observe attentivement, on peut voir qu'au moment du clic les données apparaissent dans la console pendant un instant, puis disparaissent. C'est le signe caractéristique de cette erreur.

Voyons comment résoudre ce problème.

Première solution

Dans le href du lien, il faut mettre un dièse. Cela fera que le lien pointera vers un endroit spécifique de la page actuelle et un clic sur le lien ne provoquera pas de rechargement. Faisons cela :

<a href="#">link</a>

Deuxième solution

Une méthode plus avancée consiste à annuler l'action par défaut à l'aide de la méthode preventDefault :

link.addEventListener('click', function(event) {
	console.log(this.textContent);
	event.preventDefault();
});