Errore di navigazione del link in JavaScript

Analizziamo un errore relativo a una navigazione imprevista del link. Prendiamo come esempio il seguente link:

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

Otteniamo il nostro link in una variabile:

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

Associamo un gestore di click al nostro link:

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

Ed ecco che qui ci aspetta una sorpresa. Il codice è scritto correttamente, tuttavia, l'output non appare nella console. Il fatto è che al click avviene la navigazione del link. Poiché nell'attributo href non è specificato nulla, il link semplicemente conduce alla pagina corrente.

Ciò significa che il click sul link porta al ricaricamento della pagina. Cioè i nostri dati vengono visualizzati nella console, poi la pagina si ricarica, e la console diventa vuota.

Se si osserva attentamente, si può vedere come nel momento del click i dati appaiano nella console per un istante, per poi scomparire. Questo è il segno caratteristico di questo errore.

Vediamo come è possibile risolvere questo problema.

Prima soluzione

Nel href del link bisogna mettere un cancelletto. Ciò farà sì che il link punti a una posizione specifica della pagina corrente e al click sul link non ci sarà ricaricamento. Facciamolo:

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

Seconda soluzione

Un modo più avanzato è annullare l'azione predefinita utilizzando il metodo preventDefault:

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