Napaka prepovedi prehoda po povezavi v JavaScript

Recimo, da imamo povezavo:

<a href="">povezava</a>

Pridobimo našo povezavo v spremenljivko:

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

Povežimo z našo povezavo obravnavalnik klika. Pri tem preprečimo prehod po povezavi, da se izognemo ponovnemu nalaganju strani:

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

Zdi se, da smo se popolnoma zaščitili pred nepričakovanim vedenjem. V resnici pa ni tako. Bistvo je v tem, da se ob pojavu sintaktične napake JavaScript koda preprosto ne bo izvedla, blokada povezave ne bo delovala, in izvedel se bo prehod po njej.

V tem primeru ne bomo videli niti rezultata izvajanja kode, niti napake v konzoli, saj se bo stran ponovno naložila. Naredimo namerno napako v kodi in se prepričajmo v praksi:

link.addEventListener('click', function(event) {
	thiss.textContent = 'besedilo'; // sintaktična napaka
	event.preventDefault();
});

Ta težava ima značilno lastnost: če gledamo v konzolo v trenutku klika na povezavo, bomo za trenutek videli rdečo napako v konzoli, ki skoraj takoj izgine.

Seveda besedila napake ne bomo useli prebrati, kar močno oteži njeno iskanje. Obstaja pa zvita metoda. Potrebno je v href povezave postaviti ločilo #. V tem primeru do prehoda po povezavi ne bo prišlo in bomo videli vrženo napako v konzoli:

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