event.clientX xususiyati

event.clientX xususiyati sichqoncha kursori X o'qi bo'yicha koordinatalarni o'z ichiga oladi. Koordinatalarni aniqlash uchun shuningdek event.clientY, event.pageX, event.pageY xususiyatlari mavjud. Keling clientX/clientY bilan pageX/pageY o'rtasidagi farqni ko'rib chiqaylik.

clientX va clientY qanday ishlaydi: agar sizda 1000 ga 1000 piksellı oyna bo'lsa va sichqoncha markazda bo'lsa, clientX va clientY ikkalasi ham 500 ga teng bo'ladi. Agar siz kursorni harakatlantirmasdan sahifani gorizontal yoki vertikal aylantirsangiz, clientX va clientY qiymatlari o'zgarmaydi, chunki ular hujjatga nisbatan emas, balki oynaga nisbatan hisoblanadi.

pageX va pageY qanday ishlaydi: agar sizda 1000 ga 1000 piksellı oyna bo'lsa va kursör markazda bo'lsa, pageX va pageY 500 ga teng bo'ladi. Agar siz sahifani 250 piksel pastga aylantirsangiz, pageY 750 ga teng bo'ladi. Shunday qilib pageX va pageY aylantirishni hisobga olgan holda hodisa koordinatalarini o'z ichiga oladi.

Sintaksis

javascriptevent.clientX;

Misol

Sahifa bo'ylab sichqoncha harakatlanganda uning brauzer oynasiga nisbatan koordinatalarini chiqaramiz (clientX va clientY):

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

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

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

Результат:

Shuningdek qarang