Nuorodos perėjimo blokavimo klaida JavaScript

Tarkime, kad turime nuorodą:

<a href="">nuoroda</a>

Gaukime mūsų nuorodą į kintamąjį:

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

Pririškime prie mūsų nuorodos paspaudimo apdorojimo funkciją. Tuo pačiu atšauksime perėjimą pagal nuorodą, kad išvengtume puslapio iškrovimo:

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

Atrodo, kad visiškai apsisaugojome nuo netikėto elgesio. Iš tikrųjų tai nėra taip. Esmė ta, kad atsiradus sintakseinei klaidai, JavaScript kodas tiesiog nebus vykdomas, nuorodos blokavimas neveiks ir bus atliktas perėjimas pagal ją.

Šiuo atveju nematysime nei vykdymo rezultato, nei klaidos konsolėje, nes puslapis bus perkrautas. Specialiai sukurkime klaidą kode ir įsitikinkime praktiškai:

link.addEventListener('click', function(event) {
	thiss.textContent = 'tekstas'; // sintaksinė klaida
	event.preventDefault();
});

Ši problema turi būdingą požymį: jei žiūrėtume į konsolę nuorodos paspaudimo momentu, akimirką pamatysime raudoną klaidą konsolėje, kuri beveik iškart dings.

Žinoma, klaidos teksto perskaityti nespėsime, kas labai apsunkina jos paiešką. Tačiau yra gudrus būdas. Reikia į href nuorodos įdėti grotelę. Tokiu atveju perėjimo pagal nuorodą nebus ir pamatysime į konsolę išmestą klaidą:

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