Błąd przejścia przez link w JavaScript

Przeanalizujmy błąd związany z nieoczekiwanym przejściem przez link. Weźmy dla przykładu następujący link:

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

Pobierzmy nasz link do zmiennej:

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

Przypiszmy do naszego linku obsługę kliknięcia:

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

I tutaj czeka nas niespodzianka. Kod jest napisany prawidłowo, jednak wyświetlanie w konsoli nie pojawia się. Chodzi o to, że po kliknięciu następuje przejście przez link. Ponieważ w atrybucie href nic nie jest określone, link po prostu prowadzi do bieżącej strony.

Oznacza to, że kliknięcie linku prowadzi do przeładowania strony. To znaczy nasze dane są wyświetlane w konsoli, następnie strona jest przeładowywana, i konsola staje się pusta.

Jeśli przyjrzeć się uważnie, to można zobaczyć, jak w momencie kliknięcia dane pojawiają się w konsoli na chwilę, a następnie znikają. To jest charakterystyczna cecha tego błędu.

Zobaczmy, jak można rozwiązać ten problem.

Rozwiązanie pierwsze

W href linku należy umieścić krzyżyk. To spowoduje, że link będzie wskazywał na określone miejsce bieżącej strony i po kliknięciu linku przeładowania nie będzie. Zróbmy to:

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

Rozwiązanie drugie

Bardziej zaawansowanym sposobem jest anulowanie działania domyślnego za pomocą metody preventDefault:

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