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

Фарз қилайлик, бизда ҳавола бор:

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

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

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

Ҳаволага клик ҳодисасини қайта ишловчини (event listener) боглаймиз. Бунда саҳифани қайта юклашдан қочish учун ҳавола буйича ўтишни бекор қиламиз:

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

Биз ўзимизни ку́тмаган ҳатти-ҳаракатлардан тулиқ химoyaлагандек турамиз. Аслинда бундай эмас. Гapи шуки, синтактик хатолик (paydo bo'lganda) юз берганда JavaScript коди ишламayди, ҳаволани блоклаш ишламayди ва у буйича ўтиш амалга ошади.

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

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // синтактик хатолик
	event.preventDefault();
});

Бундай муаммо ўзига хос белгига эга: агар ҳаволани босган пайтда консолни ку́зatsak, биз консолада лаҳзасига қизил хатоликни ку́рамиз, унинг матнини ўқишга улгуришдан олдин, у дарxол йўқолади.

Албатта, хатолик матнини ўқишга вакт тополмаймиз, бу уни излашни сезиларли даржада кийинлаштиради. Аммо, бир ayyor усул бор. Ҳаволанинг href атрибутига решетка ( # ) қўйиш керак. Бунда ҳавола буйича ўтиш юз бермайди ва биз консолага ташланган хатоликни ку́рамиз:

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