Грешка при кликнување на врска во JavaScript

Ајде да ја разгледаме грешката поврзана со неочекуваното кликнување на врска. Нека за пример е дадена следнава врска:

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

Ќе ја добиеме нашата врска во променлива:

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

Ќе додадеме обработувач за клик на нашата врска:

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

И тука нè чека изненадување. Кодот е напишан правилно, сепак, излезот во конзолата не се појавува. Работата е во тоа што при кликнување се случува премин по врската. Бидејќи во атрибутот href ништо не е наведено, врската едноставно води до тековната страница.

Ова значи дека кликнувањето на врската води до вчитување на страницата. Односно нашите податоци се прикажуваат во конзолата, потоа страницата се вчитува, и конзолата станува празна.

Ако внимателно се погледне, тогаш може да се види како во моментот на кликнување податоците се појавуваат во конзолата за момент, а потоа исчезнуваат. Ова е карактеристичен знак за оваа грешка.

Ајде да погледнеме како може да се реши овој проблем.

Прво решение

Во href на врската треба да се стави тараба (#). Ова ќе доведе до тоа што врската ќе покажува на одредено место на тековната страница и при кликнување на врската нема да има вчитување. Ајде да го направиме ова:

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

Второ решение

Понапреден начин е откажување на стандардното дејство со помош на методот preventDefault:

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