Klaida naršymo per nuorodą JavaScript

Išnagrinėkime klaidą, susijusią su netikėtu naršymu per nuorodą. Pavyzdžiui, tegul yra pateikta tokia nuoroda:

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

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

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

Pririškime prie mūsų nuorodos paspaudimo apdorojimo funkciją:

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

Ir štai čia mūsų laukia staigmena. Kodas parašytas teisingai, tačiau išvestis konsolėje nepasirodo. Reikalas tas, kad paspaudus įvyksta naršymas per nuorodą. Kadangi atribute href nieko nenurodyta, tai nuoroda tiesiog nukreipia į dabartinį puslapį.

Tai reiškia, kad paspaudimas ant nuorodos sukelia puslapio perkrovimą. Tai yra, mūsų duomenys išvedami į konsolę, tada puslapis persikrauna, ir konsolė tampa tuščia.

Jei atidžiai pažiūrėtumėte, tai galima pamatyti, kaip paspaudimo momentu duomenys pasirodo konsolėje akimirksniui, o tada išnyksta. Tai ir yra būdingas šios klaidos požymis.

Pažiūrėkime, kaip galima išspręsti šią problemą.

Pirmasis sprendimas

Į href nuorodos reikia įdėti grotažymį. Tai sukels tai, kad nuoroda rodys į konkretų dabartinio puslapio vietą ir paspaudus ant nuorodos perkrovimo nebus. Padarykime tai:

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

Antrasis sprendimas

Pažangesnis būdas yra numatyto veiksmo atšaukimas naudojant metodą preventDefault:

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