JavaScriptдаги ҳавола ўтиш хатоси

Кутолмаган ҳавола ўтиш билан боглик хатоликни кўриб чиқайлик. Мисол учун куйидаги ҳавола берилган бўлсин:

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

Ҳаволанимизни ўзгарувчига оламиз:

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

Ҳаволанимизга босилшини қайта ишлаш функциясини бирлаштирамиз:

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

Ва мана бу ерда бизни кутолмаган воке кутмоқда. Код тўғри ёзилган, аммо, консольда чиқиш пайдо бўлмайди. Гапи шундаки, босилганда ҳавола буйича ўтиш амалга ошади. href атрибутида ҳеч нарса кўрсатилмагани сабабли, ҳавола жўналлиши жорий саҳифага йўналтирилган.

Бу шунни англатадики, ҳаволага босилғанда саҳифа қайта юкланadi. Яъни бизнинг маълумотларимиз консольга чиқарилади, сўнг саҳифа қайта юкланadi, ва консоль бўш бўлиб қолади.

Aгар диққат билан кўриб чиқилса, у ҳолда кузатиш мумкинки, босилган лаҳзада маълумотлар консольда бир лаҳза пайдо бўлади, сўнг йўқолади. Бу эса айнан шу хатоликнинг xarakterli белгисидир.

Келгил, бу муаммони қандай ҳал қилиш мумкинлигини кўриб чиқайлик.

Биринчи ечим

href ҳаволасига решетка қўйиш керак. Бу шунга олиб келадики, ҳавола жорий саҳифанинг белгиланган жойига ишора қилади ва босилганда саҳифа қайта юкланмайди. Буни амалга оширамиз:

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

Иккинчи ечим

Яна илғор усул бу - preventDefault усули ёрдамида сунгги амални бекор қилишдир:

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