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

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

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

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

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

javascriptevent.clientY;

ဥပမာ

စာမျက်နှာပေါ်ရှိ မောက်စ်လှုပ်ရှားမှုအတွင်း၊ ၎င်း၏ ကိုဩဒိနိတ်များကို ဘရောက်ဇာဝင်းဒိုးနှင့် ဆက်စပ်ပြီး ပြသပါမည် (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;
});

Результат:

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