Hivatkozásra kattintás tiltási hibája a JavaScriptben

Tegyük fel, hogy van egy hivatkozásunk:

<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. Tiltsuk le a hivatkozás követését, hogy elkerüljük az oldal újratöltését:

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

Úgy tűnik, hogy teljesen megvédtük magunkat a váratlan viselkedéstől. Valójában ez nem így van. Az a helyzet, hogy ha szintaktikai hiba lép fel a JavaScript kódban, a kód egyszerűen nem fut le, a hivatkozás blokkolása nem működik, és a hivatkozás követése megtörténik.

Ebben az esetben sem a kód végrehajtásának eredményét, sem a konzolban megjelenő hibát nem fogjuk látni, mert az oldal újratöltődik. Csináljunk szándékosan egy hibát a kódban, és győződjünk meg gyakorlatban:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // szintaktikai hiba
	event.preventDefault();
});

Ennek a problémának jellemző jele van: ha a konzolt figyeljük a hivatkozásra kattintás pillanatában, egy pillanatra látni fogunk egy piros hibát a konzolban, ami szinte azonnal eltűnik.

Természetesen nincs időnk elolvasni a hibaüzenetet, ami jelentősen megnehezíti a megkeresését. Van azonban egy trükkös megoldás. A hivatkozás href attribútumába kell egy kettőskeresztet (#) tenni. Ebben az esetben a hivatkozás követése nem történik meg, és láthatjuk a konzolba dobott hibát:

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