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-ը պարունակում են իրադարձության կոորդինատները ոլորումը հաշվի առնելով:

Շարահյուսություն

javascriptevent.pageX;

Օրինակ

Էջի վրա մկնիկի շարժման ընթացքում մենք կցուցադրենք նրա կոորդինատները դիտարկիչի պատուհանի նկատմամբ (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;
});

Результат:

Տես նաև