Chyba přechodu na odkaz v JavaScriptu

Pojďme analyzovat chybu spojenou s neočekávaným přechodem na odkaz. Jako příklad mějme následující odkaz:

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

Získáme náš odkaz do proměnné:

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

Připojme k našemu odkazu obslužnou rutinu kliku:

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

A právě zde na nás čeká překvapení. Kód je napsán správně, ale výstup v konzoli se neobjevuje. Problém je v tom, že při kliknutí dojde k přechodu na odkaz. Protože v atributu href nic není uvedeno, odkaz jednoduše vede na aktuální stránku.

To znamená, že kliknutí na odkaz vede k obnovení stránky. To znamená, že naše data se vypíší do konzole, poté se stránka obnoví a konzole je prázdná.

Pokud se pozorně podíváte, můžete vidět, jak se v okamžiku kliknutí data na okamžik objeví v konzoli, a pak zmizí. To je charakteristický znak této chyby.

Podívejme se, jak lze tento problém vyřešit.

První řešení

Do href odkazu je třeba vložit mřížku. To povede k tomu, že odkaz bude ukazovat na konkrétní místo aktuální stránky a při kliknutí na odkaz nedojde k obnovení. Udělejme to:

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

Druhé řešení

Pokročilejším způsobem je zrušení výchozí akce pomocí metody preventDefault:

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