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();
});