Chyba zákazu přechodu na odkaz v JavaScriptu

Předpokládejme, že máme 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. Zároveň zrušme přechod na odkaz, abychom se vyhnuli opětovnému načtení stránky:

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

Zdá se, že jsme se plně ochránili před neočekávaným chováním. Ve skutečnosti to tak není. Jde o to, že při výskytu syntaktické chyby JavaScript kód jednoduše nebude proveden, blokování odkazu nefunguje a dojde k přechodu na něj.

V tomto případě neuvidíme ani výsledek provedení kódu, ani chybu v konzoli, protože stránka se znovu načte. Udělejme záměrně chybu v kódu a přesvědčme se v praxi:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // syntaktická chyba
	event.preventDefault();
});

Tento problém má charakteristický rys: pokud se podíváme do konzole v okamžiku kliknutí na odkaz, uvidíme na okamžik červenou chybu v konzoli, která téměř okamžitě zmizí.

Samozřejmě, že text chyby nestihneme přečíst, což výrazně ztěžuje její hledání. Existuje však chytrý trik. Je třeba do href odkazu vložit mřížku. V tomto případě k přechodu na odkaz nedojde a uvidíme vyvolanou chybu v konzoli:

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