Eroare la navigarea prin link în JavaScript

Să analizăm o eroare legată de navigarea neașteptată prin link. Să luăm ca exemplu următorul link:

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

Să obținem linkul nostru într-o variabilă:

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

Să atașăm linkului nostru un handler de click:

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

Și iată că aici ne așteaptă o surpriză. Codul este scris corect, totuși, ieșirea în consolă nu apare. Faptul este că la click are loc navigarea prin link. Deoarece în atributul href nimic nu este specificat, linkul pur și simplu duce la pagina curentă.

Aceasta înseamnă că click-ul pe link duce la reîncărcarea paginii. Adică datele noastre sunt afișate în consolă, apoi pagina se reîncarcă, iar consola devine goală.

Dacă privim cu atenție, putem vedea cum în momentul click-ului datele apar în consolă pentru o clipă, apoi dispar. Acesta este semnul distinctiv al acestei erori.

Să vedem cum putem rezolva această problemă.

Soluția prima

În href linkului trebuie să punem diez. Acest lucru va duce la faptul că linkul va indica către un anumit loc al paginii curente și la click pe link nu va avea loc reîncărcarea. Să facem asta:

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

Soluția a doua

O metodă mai avansată este anularea acțiunii implicite cu ajutorul metodei preventDefault:

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