event.pageX հատկությունը
event.pageX հատկությունը պարունակում է
մկնիկի կուրսորի կոորդինատները X առանցքի վրա:
Կոորդինատները որոշելու համար կան նաև
event.clientX,
event.clientY,
event.pageY
հատկությունները:
Եկեք տեսնենք 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-ը պարունակում են իրադարձության կոորդինատները
ոլորումը հաշվի առնելով:
Շարահյուսություն
event.pageX;
Օրինակ
Էջի վրա մկնիկի շարժման ընթացքում մենք կցուցադրենք
նրա կոորդինատները դիտարկիչի պատուհանի նկատմամբ
(pageX և pageY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
