ဂုဏ်သတ္တိ event.clientX

ဂုဏ်သတ္တိ event.clientX တွင် X-ဝင်ရိုးပေါ်ရှိ မောက်စ်ညွှန်တံ၏ ကိုဩဒိနိတ်များ ပါရှိသည်။ ကိုဩဒိနိတ်များကို သတ်မှတ်ရန် ဂုဏ်သတ္တိများဖြစ်သော event.clientY, event.pageX, event.pageY တို့လည်း ရှိပါသည်။ clientX/clientY နှင့် pageX/pageY တို့၏ ကွာခြားချက်ကို ကြည့်ကြရအောင်။

clientX နှင့် clientY တို့ အလုပ်လုပ်ပုံ- သင့်မှာ ပစ်ကယ်အလုံး 1000 အကျယ် 1000 ရှိသော ဝင်းဒိုးတစ်ခု ရှိပြီး မောက်စ်သည် အလယ်ဗဟိုတွင်ရှိလျှင်၊ clientX နှင့် clientY နှစ်ခုလုံးသည် 500 နှင့် ညီမျှပါမည်။ အကယ်၍ သင် ထို့နောက် စာမျက်နှာကို အလျားလိုက် သို့မဟုတ် ဒေါင်လိုက်ဆွဲကြည့် (scroll) ပြီး ညွှန်တံကို မရွှေ့ဘဲထားလျှင်၊ တန်ဖိုးများ clientX နှင့် clientY မပြောင်းလဲပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်းတို့ကို စာရွက်စာတမ်း (document) နှင့် မဆိုင်ဘဲ ဝင်းဒိုး (window) နှင့် ဆိုင်သော အတိုင်းအတာအရ တွက်ချက်သောကြောင့်ဖြစ်သည်။

pageX နှင့် pageY တို့ အလုပ်လုပ်ပုံ- သင့်မှာ ပစ်ကယ်အလုံး 1000 အကျယ် 1000 ရှိသော ဝင်းဒိုးတစ်ခု ရှိပြီး ညွှန်တံသည် အလယ်ဗဟိုတွင်ရှိလျှင်၊ pageX နှင့် pageY တို့သည် 500 နှင့် ညီမျှပါမည်။ အကယ်၍ သင် ထို့နောက် စာမျက်နှာကို အောက်ဘက်သို့ ပစ်ကယ် 250 ဆွဲကြည့် (scroll) လိုက်လျှင်၊ pageY သည် 750 နှင့် ညီမျှသွားပါမည်။ ထို့ကြောင့် pageX နှင့် pageY တို့တွင် ဆွဲကြည့်ခြင်း (scrolling) ကို ထည့်သွင်းစဉ်းစားထားသော အဖြစ်အပျက်၏ ကိုဩဒိနိတ်များ ပါရှိသည်။

ဝါကျဖွဲ့စည်းပုံ

javascriptevent.clientX;

ဥပမာ

စာမျက်နှာပေါ်တွင် မောက်စ်ရွှေ့လျားသည့်အခါ ဘရောက်ဆာ၏ ဝင်းဒိုးနှင့် ဆိုင်သော ၎င်း၏ကိုဩဒိနိတ်များကို ထုတ်ပြမည် (clientX နှင့် clientY):

html<div id="elem">0 : 0</div>

javascriptlet elem = document.getElementById('elem');

document.addEventListener('mousemove', function(event) {
  elem.innerHTML = event.clientX + ' : ' + event.clientY;
});

Результат:

ဤသည်ကိုလည်း ကြည့်ပါ