JavaScript හි සබැඳියකට ගමන් කිරීම අවහිර කිරීමේ දෝෂය

අපට සබැඳියක් ඇතැයි සිතමු:

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

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

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

අපගේ සබැඳියට ක්ලික් කිරීමේ සැකසුම්කරුවෙකු බඳිමු. මෙහිදී සබැඳියට ගමන් කිරීම අවලංගු කරමු, පිටුව නැවත ලබා ගැනීම වළක්වා ගැනීම සඳහා:

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

අපව අනපේක්ෂිත හැසිරීමෙන් සම්පූර්ණයෙන්ම ආරක්ෂා කර ඇති බව පෙනේ. ඇත්ත වශයෙන්ම එය එසේ නොවේ. කාරණය නම්, වාග් රීති දෝෂයක් ඇති වූ විට JavaScript කේතය ක්රියාත්මක නොවන අතර, සබැඳිය අවහිර කිරීම ක්රියා නොකරන බවත්, එහි ගමන් කිරීම සිදුවනු ඇති බවත් ය.

මෙම අවස්ථාවේ දී, අපි කේතය ක්රියාත්මක කිරීමේ ප්රතිඵලය හෝ කොන්සෝලයේ දෝෂයක් දකින්නේ නැත, මක්නිසාද පිටුව නැවත ලබා ගනී. අපි ස්වේච්ඡාවෙන් කේතයේ දෝෂයක් සාදා ප්රායෝගිකව පරීක්ෂා කර බලමු:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // වාග් රීති දෝෂය
	event.preventDefault();
});

මෙම ගැටලුවට ලක්ෂණික ලක්ෂණයක් ඇත: සබැඳිය මත ක්ලික් කරන මොහොතේ කොන්සෝලය දෙස බැලුවහොත්, අපට තත්පරයක් පමණ කොන්සෝලයේ රතු දෝෂයක් දකිනු ඇත, එය පාහේ වහාම අතුරුදහන් වේ.

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

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