JavaScriptтеги шилтеме боюнча ката

Шилтеме боюнча күтүлбөгөн өтүү менен байланышкан катаны талкойлу. Мисалы төмөнкү шилтемени алалы:

<a href="">шилтеме</a>

Биздин шилтемени өзгөрмөгө алалы:

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

Шилтемеге чыкылдатуу иштеткичин байлап койолу:

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

Мына бул жерде бизди таң калтыруучу нерсе күтөт. Код туура жазылган, бирок консолдо чыгарылыш пайда болбойт. Мунун себеби, чыкылдатуу учурунда шилтеме боюнча өтүү болуп жатат. Анткени href атрибутунда эч нерсе көрсөтүлгөн эмес, анда шилтеме жөн эле учурдагы баракчага багыттайт.

Бул шилтемени чыкылдатуу баракчаны кайра жүктөөгө алып келет дегенди билдирет. Биздин маалыматтар консолго чыгарылат, андан кийин баракча кайра жүктөлөт, жана консол бош болуп калат.

Эгерде этибар менен карасак, анда чыкылдатуу учурунда маалыматтар консолдо бир аз гана убакытка пайда болуп, анан жоголуп кеткенин көрө алабыз. Бул ушул катанын мүнөздүү белгиси болуп саналат.

Келгиле, бул көйгөйлү кантип чечсе болорун карап көрөлү.

Биринчи чечим

Шилтеменин href атрибутуна решетка коюлушу керек. Бул шилтеме учурдагы баракчанын белгилүү бир жерине багытталышына алып келет жана шилтемени чыкылдатууда кайра жүктөлүү болбойт. Муну ишке ашыралы:

<a href="#">шилтеме</a>

Экинчи чечим

Андан өнүктүрүлгөн ыкма - бул ыңгайлуулук боюнча иш-аракетти preventDefault методу аркылуу токтотуу:

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