Błąd zakazu przejścia przez link w JavaScript

Załóżmy, że mamy link:

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

Pobierzmy nasz link do zmiennej:

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

Przypiszmy do naszego linku obsługę zdarzenia kliknięcia. Anulujmy przy tym przejście przez link, aby uniknąć przeładowania strony:

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

Wydaje się, że w pełni zabezpieczyliśmy się przed nieoczekiwanym zachowaniem. W rzeczywistości tak nie jest. Chodzi o to, że w przypadku wystąpienia błędu składniowego kod JavaScript po prostu nie zostanie wykonany, blokada linku nie zadziała i nastąpi przejście przez niego.

W tym przypadku nie zobaczymy ani wyniku wykonania kodu, ani błędu w konsoli, ponieważ strona się przeładuje. Celowo zróbmy błąd w kodzie i przekonajmy się w praktyce:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // błąd składniowy
	event.preventDefault();
});

Taki problem ma charakterystyczną cechę: jeśli patrzeć w konsolę w momencie kliknięcia na link, na moment zobaczymy czerwoną błąd w konsoli, który prawie natychmiast zniknie.

Oczywiście, nie zdążymy przeczytać tekstu błędu, co znacznie utrudnia jego znalezienie. Jest jednak sprytna sztuczka. Należy w href linku umieścić kratkę. W tym przypadku przejście przez link się nie wydarzy i zobaczymy wyrzucony błąd w konsoli:

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