Linkin klikkausvirhe JavaScriptissä

Käsitellään virhettä, joka liittyy odottamattomaan linkin klikkaukseen. Otetaan esimerkiksi seuraava linkki:

<a href="">linkki</a>

Haetaan linkki muuttujaan:

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

Liitetään linkkiimme klikkauskäsittelijä:

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

Ja tässä meitä odottaa yllätys. Koodi on kirjoitettu oikein, mutta konsoliin ei ilmesty tulostetta. Asia on siinä, että klikkauksen yhteydessä tapahtuu siirtyminen linkin kautta. Koska attribuutissa href ei ole määritetty mitään, linkki ohjaa yksinkertaisesti nykyiselle sivulle.

Tämä tarkoittaa, että linkkiä klikkaamalla sivu latautuu uudelleen. Toisin sanoen datamme tulostuvat konsoliin, sitten sivu latautuu uudelleen, ja konsoli tyhjenee.

Jos tarkkailee tarkasti, niin voidaan nähdä, kuinka klikkauksen hetkellä data ilmestyy konsoliin hetkeksi, ja sitten katoaa. Tämä on tyypillinen merkki tästä virheestä.

Katsotaan, kuinka tämän ongelman voi ratkaista.

Ratkaisu yksi

Linkin href-attribuuttiin tulee laittaa risuaita. Tämä johtaa siihen, että linkki osoittaa tiettyyn kohtaan nykyistä sivua, eikä klikatessa sivu lataudu uudelleen. Tehdään näin:

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

Ratkaisu kaksi

Kehittyneempi tapa on oletustoiminnon estäminen käyttämällä metodia preventDefault:

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