Lingil navigeerimise blokeerimise viga JavaScriptis

Oletame, et meil on link:

<a href="">link</a>

Saame lingi muutujasse:

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

Seome lingiga klikiöötleja. Samal ajal peatame lingile navigeerimise, et vältida lehe uuesti laadimist:

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

Tundub, et oleme end täielikult kaitsnud ootamatu käitumise eest. Tegelikult see nii ei ole. Asi on selles, et kui tekkib süntaksiviga, JavaScripti koodi lihtsalt ei täideta, lingi blokeerimine ei toimi ja toimub navigeerimine sellele.

Sel juhul me ei näe ei koodi täitmise tulemust ega veateadet konsoolis, sest leht laaditakse uuesti. Teeme meelega vea koodis ja veendume praktikas:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // süntaksiviga
	event.preventDefault();
});

Sellisel probleemil on iseloomulik tunnus: kui vaadata konsooli hetkel, kui vajutada lingile, näeme hetkeks punast viga konsoolis, mis peaaegu kohe kaob.

Loomulikult ei jõua me vea teksti läbi lugeda, mis muudab vea leidmise oluliselt raskemaks. On siiski kaval nipp. Tuleb lingi href -atribuuti panna trellid. Sel juhul lingile navigeerimist ei toimu ja me näeme konsooli visatud vea:

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