Lingil klikkimise viga JavaScriptis

Vaatame viga, mis on seotud ootamatu lingile navigeerimisega. Võtame näiteks järgmise lingi:

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

Saame lingi muutujasse:

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

Seome oma lingiga klikkide töötleja:

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

Ja siin ootab meid üllatus. Kood on kirjutatud õigesti, kuid konsooli väljundit ei ilmu. Asi on selles, et klikkimisel toimub navigeerimine lingile. Kuna atribuudis href pole midagi määratud, siis link lihtsalt suunab praegusele lehele.

See tähendab, et lingile klikkimine viib lehe uuesti laadimiseni. See tähendab, et meie andmed kuvatakse konsoolis, seejärel laaditakse leht uuesti, ja konsool muutub tühjaks.

Kui tähelepanelikult vaadata, siis võib näha, kuidas klikkimise hetkel andmed ilmuvaid konsooli hetkeks, enne kui kaovad. See ongi iseloomulik märk sellest veast.

Vaatame, kuidas seda probleemi saab lahendada.

Esimene lahendus

Lingi href-isse tuleb panna trellid (#). See põhjustab selle, et link osutab kindlale kohale praegusel lehel ja klikkimisel lingile uuesti laadimist ei toimu. Teeme selle:

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

Teine lahendus

Täiustatum viis on vaikimisi tegevuse tühistamine meetodi abil preventDefault:

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