Gabimi i ndalimit të kalimit nëpër lidhje në JavaScript

Le të themi se kemi një lidhje:

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

Le të marrim lidhjen tonë në një ndryshore:

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

Le të lidhim një përgjigjës të klikimit me lidhjen tonë. Le të anulojmë kalimin nëpër lidhje për të shmangur rifreskimin e faqes:

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

Duket sikur jemi mbrojtur plotësisht nga sjellje e papritur. Në realitet nuk është kështu. Çështja është se kur ndodh një gabim sintaksor, kodi JavaScript thjesht nuk do të ekzekutohet, bllokimi i lidhjes nuk do të funksionojë, dhe do të kryhet kalimi nëpër të.

Në këtë rast ne nuk do të shohim as rezultatin e ekzekutimit të kodit, as gabimin në konsol, sepse faqja do të rifreskohet. Le të bëjmë qëllimisht një gabim në kod dhe të bindemi në praktikë:

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

Ky problem ka një shenjë karakteristike: nëse shikoni në konsol në momentin e klikimit në lidhje, ne për një çast do të shohim një gabim të kuq në konsol, i cili pothuajse menjëherë do të zhduket.

Sigurisht, ne nuk kemi kohë të lexojmë tekstin e gabimit, gjë që e vështirëson ndjeshëm kërkimin e saj. Megjithatë, ekziston një mashtrim i zgjuar. Duhet të vendosni një lattë ( # ) në href të lidhjes. Në këtë rast, kalimi nëpër lidhje nuk do të ndodhë dhe ne do të shohim gabimin e hedhur në konsol:

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