Chyba pri prechode na odkaz v JavaScripte

Poďme rozobrať chybu spojenú s neočakávaným prechodom na odkaz. Pre príklad nech je daný nasledujúci odkaz:

<a href="">odkaz</a>

Získame náš odkaz do premennej:

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

Pripojíme k nášmu odkazu obslužnú rutinu kliku:

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

A tu nás čaká prekvapenie. Kód je napísaný správne, avšak výstup v konzole sa neobjaví. Vec sa má tak, že pri kliknutí dôjde k prechodu na odkaz. Keďže v atribúte href nie je nič zadané, odkaz jednoducho vedie na aktuálnu stránku.

To znamená, že kliknutie na odkaz vedie k opätovnému načítaniu stránky. To znamená, že naše dáta sa vypíšu do konzoly, potom sa stránka znova načíta, a konzola sa vyprázdni.

Ak sa pozorne pozriete, môžete vidieť, ako v momente kliknutia sa dáta na okamih objavia v konzole, a potom zmiznú. To je charakteristický príznak tejto chyby.

Pozrime sa, ako je možné vyriešiť tento problém.

Prvé riešenie

Do href odkazu je potrebné zadať mriežku. To spôsobí, že odkaz bude odkazovať na konkrétne miesto aktuálnej stránky a pri kliknutí na odkaz nedôjde k opätovnému načítaniu. Urobme to:

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

Druhé riešenie

Pokročilejším spôsobom je zrušenie predvoleného správania pomocou metódy preventDefault:

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