JavaScript හි සබැඳියක් මත ක්ලික් කිරීමේ දෝෂය

අපි සබැඳියක් මත අනපේක්ෂිතව ක්ලික් කිරීම හා සම්බන්ධ දෝෂය විශ්ලේෂණය කරමු. උදාහරණයක් ලෙස, පහත සබැඳිය ලබා දී ඇතැයි සිතමු:

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

අපගේ සබැඳිය විචල්යයකට ගනිමු:

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

අපගේ සබැඳියට ක්ලික් කිරීමේ event handler එකක් bind කරමු:

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

මෙහි දී අපව රහසක් බලා සිටියි. කේතය නිවැරදිව ලියා ඇතත්, console හි output එක පෙනෙන්නේ නැත. හේතුව වන්නේ, ක්ලික් කිරීමේ දී සබැඳිය හරහා සංක්‍රමණය වීම සිදුවීමයි. href ගුණාංගයේ කිසිවක් නොසඳහන් නිසා, සබැඳිය වත්මන් පිටුවටම යොමු වේ.

මෙයින් අදහස් වන්නේ සබැඳිය මත ක්ලික් කිරීම පිටුව නැවත ලොඩ් කිරීමට හේතු වේ. එනම් අපගේ දත්ත console හි දර්ශනය වන අතර, පිටුව නැවත ලොඩ් වීමත් සමඟ, console හිස් වේ.

ප්‍රවේශමෙන් බැලූ විට, ක්ලික් කිරීමේ මොහොතේ දත්ත අවපලකයේ තත්පර කිහිපයකට පෙනී ඇති අතර, ඉන් පසුව අතුරුදහන් වන බව දැකගත හැකිය. මෙය මෙම දෝෂයේ ලක්ෂණයයි.

මෙම ගැටළුව විසඳා ගත හැකි ආකාරය අපි බලමු.

පළමු විසඳුම

සබැඳියේ href හි hash එකක් (#) යොදන්න. මෙයින් සබැඳිය වත්මන් පිටුවේ නිශ්චිත ස්ථානයකට යොමු වන අතර ක්ලික් කිරීමේ දී පිටුව නැවත ලොඩ් වන්නේ නැත. අපි එය කරමු:

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

දෙවන විසඳුම

වඩාත් උසස් ක්‍රමය වන්නේ preventDefault method එක භාවිතයෙන් පෙරනිමි ක්‍රියාව අවලංගු කිරීමයි:

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