Хатоги гузариш аз рӯйи истинод дар 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();
});