Hitilafu ya Uvunjaji kiungo katika JavaScript

Wacha tuchambue hitilafu inayohusiana na uvunjaji wa kiungo usiotarajiwa. Wacha kwa mfano tupewe kiungo kifuatacho:

<a href="">kiungo</a>

Tupate kiungo chetu kwenye kutofautisha:

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

Tunganishe kichakataji kubofya kwa kiungo chetu:

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

Na hapa ndipo tunakabiliwa na mshangao. Msimbo umeandikwa vyema, hata hivyo, matokeo hayapo kwenye koni. Jambo ni kwamba, wakati wa kubofya, uvunjaji wa kiungo hufanyika. Kwa kuwa katika sifa href hakuna kitu kilioko, basi kiungo kinaelekeza tu kwenye ukurasa wa sasa.

Hii inamaanisha kuwa kubofya kiungo husababisha upakiaji upya wa ukurasa. Yaani data zetu zinachapishwa kwenye koni, kisha ukurasa unapakiwa upya, na koni hubaki tupu.

Kwa kutazama kwa makini, inawezekana kuona, jinsi wakati wa kubofya data zinaonekana kwenye koni kwa muda mfupi, kisha kutoweka. Hii ndio ishara ya kipekee ya hitilafu hii.

Wacha tuangalie jinsi inawezekana kutatua tatizo hili.

Suluhisho la kwanza

Katika href ya kiungo inahitajika kuweka alama ya sauti. Hii itasababisha kiungo kuashiria mahali maalum katika ukurasa wa sasa na wakati wa kubofya kiungo upakiaji upya hautafanyika. Wacha tufanye hivi:

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

Suluhisho la pili

Njia ya kisasa zaidi ni kufutwa kitendo cha chaguomsingi kwa kutumia mbinu preventDefault:

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