Napaka pri kliku na povezavo v JavaScriptu

Oglejmo si napako, povezano z nepričakovanim prehodom na povezavo. Vzemimo za primer naslednjo povezavo:

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

Pridobimo našo povezavo v spremenljivko:

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

Povežimo našo povezavo z obravnavalnikom klika:

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

In tukaj nas čudi presenečenje. Koda je napisana pravilno, vendar se izpis v konzoli ne pojavi. Bistvo je, da ob kliku pride do prehoda na povezavo. Ker v atributu href ni nič določenega, potem povezava preprosto vodi na trenutno stran.

To pomeni, da klik na povezavo privede do ponovnega nalaganja strani. To pomeni, da se naši podatki izpišejo v konzolo, nato se stran ponovno naloži, in konzola postane prazna.

Če natančno opazujemo, lahko vidimo, kako se v trenutku klika podatki za trenutek pojavijo v konzoli, nato pa izginejo. To je značilno znamenje te napake.

Poglejmo, kako lahko rešimo ta problem.

Prva rešitev

V href povezave je treba postaviti lojtro. To bo povzročilo, da bo povezava kazala na določeno mesto trenutne strani in ob kliku na povezavo ponovnega nalaganja ne bo. Naredimo to:

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

Druga rešitev

Bolj napreden način je preklic dejanja po privzetem z metodo preventDefault:

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