Грешка при навигиране по връзка в 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();
});