JavaScript ရှိ လင့်ခ်သို့ အလိုအလျောက် ခုန်ခြင်း အမှား

လင့်ခ်တစ်ခုသို့ မမျှော်လင့်ထားသော ခုန်ကျော်သွားခြင်း ဆက်စပ်နေသည့် အမှားကို လေ့လာကြည့်ရအောင်။ ဥပမာအနေဖြင့် အောက်ပါလင့်ခ်ကို ပေးထားသည်ဟု ယူဆပါစို့။

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

ကျွန်ုပ်တို့၏ လင့်ခ်ကို ကိန်းရှင်တစ်ခုအတွင်း ရယူပါမည်။

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

ကျွန်ုပ်တို့၏ လင့်ခ်သို့ ကလစ်နှိပ်ခြင်း လက်ခံကိုင်တွယ်သူ (event handler) တစ်ခု ချိတ်ဆက်ပါမည်။

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

ဤနေရာတွင် အံ့အားသင့်စရာတစ်ခု ရှိနေပါသည်။ ကုဒ်သည် မှန်ကန်စွာ ရေးသားထားသော်လည်း console တွင် ရလဒ်များ မပေါ်လာပါ။ အကြောင်းမှာ ကလစ်နှိပ်လိုက်သောအခါ လင့်ခ်သို့ ခုန်ကျော်သွားခြင်း ဖြစ်ပွားသောကြောင့် ဖြစ်သည်။ href attribute တွင် ဘာမှ သတ်မှတ်မထားသောကြောင့် လင့်ခ်သည် လက်ရှိစာမျက်နှာသို့သာ ညွှန်ပြနေပါသည်။

ဆိုလိုသည်မှာ လင့်ခ်ကို နှိပ်ခြင်းသည် စာမျက်နှာ ပြန်လည်စတင်ခြင်းကို ဖြစ်စေသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ ဒေတာများသည် console တွင် ရောက်ရှိသွားပြီး၊ ထို့နောက် စာမျက်နှာ ပြန်လည်စတင်သွားကာ console သည် ဗလာဖြစ်သွားပါသည်။

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

ဤပြဿနာကို မည်သို့ဖြေရှင်းနိုင်သည်ကို ကြည့်ရှုကြပါစို့။

ပထမဆုံး ဖြေရှင်းနည်း

လင့်ခ်၏ href တွင် ဟက်ရှ် (#) ကို ထည့်သွင်းရန် လိုအပ်သည်။ ဤသို့ပြုလုပ်ခြင်းဖြင့် လင့်ခ်သည် လက်ရှိစာမျက်နှာ၏ တိကျသောနေရာတစ်ခုကို ညွှန်ပြနေမည်ဖြစ်ပြီး လင့်ခ်ကို နှိပ်သောအခါ စာမျက်နှာ ပြန်လည်စတင်ခြင်း ဖြစ်မည်မဟုတ်ပါ။ ဤသို့ပြုလုပ်ကြည့်ပါ။

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

ဒုတိယ ဖြေရှင်းနည်း

ပိုမိုအဆင့်မြင့်သော နည်းလမ်းတစ်ခုမှာ preventDefault နည်းလမ်းကို အသုံးပြု၍ စံထားချက် လုပ်ဆောင်ချက်ကို ပယ်ဖျက်ခြင်း ဖြစ်သည်။

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