ပိုင်ဆိုင်မှု event.pageY

ပိုင်ဆိုင်မှု event.pageY တွင် Y-axis အပေါ် ကြွက်ကာဆာ၏ ကိုဩဒိနိတ်များ ပါဝင်သည်။ ကိုဩဒိနိတ်များအား သတ်မှတ်ရန်အတွက် event.clientX, event.clientY, event.pageX ဟူသည့် ပိုင်ဆိုင်မှုများလည်း ရှိပါသည်။ clientX/clientY နှင့် pageX/pageY တို့၏ ကွာခြားချက်ကို ကြည့်ကြရအောင်။

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

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

ဝါကျဖွဲ့ပုံ

javascriptevent.pageY;

ဥပမာ

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

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

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

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

Результат:

ဤအရာကိုလည်း ကြည့်ပါ