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

Le të shqyrtojmë një gabim që ka të bëjë me kalimin e papritur nëpër një lidhje. Le të marrim si shembull lidhjen e mëposhtme:

<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 në lidhjen tonë:

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

Dhe këtu na pret një surprizë. Kodi është shkruar saktë, megjithatë, dalja në konsol nuk shfaqet. Çështja është se kur klikohet, ndodh një kalim nëpër lidhje. Meqenëse në atributin href asgjë nuk është specifikuar, lidhja thjesht çon në faqen aktuale.

Kjo do të thotë se klikimi në lidhje çon në rifreskim të faqes. Domethënë të dhënat tona shfaqen në konsol, pastaj faja rifreskohet, dhe konsola bëhet e zbrazët.

Nëse shikoni me kujdes, mund të shihni se në momentin e klikimit të dhënat shfaqen në konsol për një çast, e më pas zhduken. Ky është shenja karakteristike e këtij gabimi.

Le të shohim se si mund të zgjidhet ky problem.

Zgjidhja e parë

Në href të lidhjes duhet vendosur një simbol dieze (#). Kjo do të shkaktojë që lidhja të tregojë në një vend të caktuar të faqes aktuale dhe kur klikohet në lidhje nuk do të ketë rifreskim. Le ta bëjmë këtë:

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

Zgjidhja e dytë

Një mënyrë më e avancuar është anulimi i veprimit të parazgjedhur duke përdorur metodën preventDefault:

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