Памылка пераходу па спасылцы ў 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();
});