JavaScript တွင် လင့်ခ်သွားခြင်းကို တားမြစ်သည့် အမှား

ကျွန်ုပ်တို့တွင် လင့်ခ်တစ်ခုရှိသည်ဆိုပါစို့:

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

လင့်ခ်ကို variable တစ်ခုထဲသို့ ရယူမည်:

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

လင့်ခ်တွင် click event listener တစ်ခုချိတ်ဆက်ပါမည်။ စာမျက်နှာ reload မဖြစ်ရန် လင့်ခ်သို့သွားခြင်းကို တားဆီးမည်:

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

မထင်မှတ်ထားသော အပြုအမူများမှ ကျွန်ုပ်တို့လုံခြုံစွာကာကွယ်ထားသည်ဟု ထင်ရပါသည်။ တကယ်တော့ မဟုတ်ပါ။ ပြဿနာမှာ syntax error တစ်ခုပေါ်ပေါက်ပါက JavaScript code က run မည်မဟုတ်သဖြင့် လင့်ခ်ကိုတားဆီးခြင်းလုပ်ဆောင်မည်မဟုတ်ဘဲ လင့်ခ်သို့သွားမည်ဖြစ်သည်။

ဤအခြေအနေတွင် code run ခြင်း၏ရလဒ်ကိုလည်းမမြင်၊ console တွင်အမှားကိုလည်းမမြင်ရဘဲ စာမျက်နှာ reload ဖြစ်သွားမည်ဖြစ်သည်။ code တွင် အမှားတစ်ခုကို အထူးဖန်တီးကြည့်ပြီး လက်တွေ့စမ်းသပ်ကြည့်ပါစို့:

link.addEventListener('click', function(event) {
	thiss.textContent = 'text'; // syntax error
	event.preventDefault();
});

ဤသို့သောပြဿနာတွင် ထူးခြားသောလက္ခဏာတစ်ခုရှိသည်: လင့်ခ်ကိုနှိပ်သည့်အချိန်တွင် console ကိုကြည့်ပါက console တွင် အနီရောင်အမှားကိုခဏတာမြင်ရပြီး လျင်မြန်စွာ ပျောက်ကွယ်သွားမည်။

ကျွန်ုပ်တို့သည် အမှား၏စာသားကိုဖတ်ရန် အချိန်မရပါ၊ ထို့ကြောင့် ၎င်းကိုရှာဖွေရန်ခက်ခဲစေသည်။ သို့သော် လှည့်ကွက်တစ်ခုရှိပါသည်။ လင့်ခ်၏ href attribute တွင် hash (#) တစ်ခုထည့်ရမည်။ ထိုသို့ဆိုလျှင် လင့်ခ်သို့သွားခြင်းမဖြစ်တော့ဘဲ console ထုတ်ပြသည့်အမှားကို မြင်ရမည်:

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