Chyba zákazu prechodu na odkaz v JavaScripte

Nech máme odkaz:

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

Získajme náš odkaz do premennej:

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

Pripojme k nášmu odkazu obslužnú rutinu kliku. Zároveň zrušme prechod na odkaz, aby sme sa vyhli obnoveniu stránky:

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

Zdá sa, že sme sa úplne ochránili pred neočakávaným správaním. V skutočnosti to tak nie je. Ide o to, že pri výskyte syntaktickej chyby JavaScript kód jednoducho nebude vykonaný, blokovanie odkazu nebude fungovať a uskutoční sa prechod naň.

V tomto prípade neuvidíme ani výsledok vykonania kódu, ani chybu v konzole, pretože stránka sa obnoví. Urobme zámerne chybu v kóde a presvedčme sa v praxi:

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

Tento problém má charakteristický znak: ak sa pozrieme do konzoly v momente kliknutia na odkaz, na okamih uvidíme červenú chybu v konzole, ktorá takmer okamžite zmizne.

Samozrejme, prečítať text chyby nestihneme, čo výrazne sťažuje jej hľadanie. Existuje však prefíkaný trik. Treba do href odkazu vložiť mriežku. V tomto prípade k prechodu na odkaz nedôjde a uvidíme vyhodenenú chybu v konzole:

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