Hivatkozásra kattintási hiba JavaScriptben

Elemezzünk egy hibát, amely a hivatkozásra való váratlan navigálással kapcsolatos. Példaként vegyük a következő hivatkozást:

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

Kapjuk meg a hivatkozásunkat egy változóban:

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

Rendeljünk hozzá egy kattintáskezelőt a hivatkozáshoz:

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

És itt vár ránk a meglepetés. A kód helyesen van írva, mégsem jelenik meg a konzolban az üzenet. Az a helyzet, hogy a kattintás a hivatkozás nyomon követését váltja ki. Mivel a href attribútumban semmi nincs megadva, a hivatkozás egyszerűen az aktuális oldalra mutat.

Ez azt jelenti, hogy a hivatkozásra kattintás az oldal újratöltődéséhez vezet. Vagyis az adataink kiíródnak a konzolra, majd az oldal újratöltődik, és a konzol üres lesz.

Ha figyelmesen megfigyeljük, láthatjuk, hogy a kattintás pillanatában az adatok egy pillanatra megjelennek a konzolon, majd eltűnnek. Ez ennek a hibának a jellemző jele.

Nézzük meg, hogyan oldhatjuk meg ezt a problémát.

Első megoldás

A href attribútumba tegyünk egy kettőskeresztet (#). Ez azt eredményezi, hogy a hivatkozás az aktuális oldal egy meghatározott helyére mutat, és a hivatkozásra kattintáskor nem történik újratöltés. Tegyük ezt meg:

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

Második megoldás

Egy fejlettebb módszer az alapértelmezett művelet megakadályozása a preventDefault metódussal:

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