event.clientX հատկությունը
event.clientX հատկությունը պարունակում է
մկանիկի Y առանցքի կոորդինատները:
Կոորդինատները որոշելու համար կան նաև
event.clientY,
event.pageX,
event.pageY
հատկությունները:
Եկեք տեսնենք clientX/clientY-ի և
pageX/pageY-ի
միջև եղած տարբերությունը:
Ինչպես են աշխատում clientX-ն ու clientY-ն.
եթե դուք ունեք 1000 x 1000
պիքսել պատուհան, և մկանիկը գտնվում է կենտրոնում, ապա clientX-ն
ու clientY-ն երկուսն էլ հավասար կլինեն 500-ի:
Եթե
dրանից հետո դուք ոլորեք էջը հորիզոնական
կամ ուղղահայաց, առանց կուրսորը տեղափոխելու, ապա
clientX-ի և clientY-ի արժեքները չեն փոխվի, քանի որ դրանք հաշվվում են
պատուհանի նկատմամբ, և ոչ թե փաստաթղթի:
Ինչպես են աշխատում pageX-ն ու pageY-ն.
եթե դուք ունեք 1000 x 1000
պիքսել պատուհան, և կուրսորը գտնվում է կենտրոնում, ապա
pageX-ն ու pageY-ն հավասար կլինեն 500-ի:
Եթե
dրանից հետո դուք ոլորեք էջը 250
պիքսել ներքև, ապա pageY-ն կդառնա 750:
Այսպիսով, pageX-ն ու pageY-ն պարունակում են իրադարձության
կոորդինատները՝ հաշվի առնելով ոլորումը:
Շարահյուսություն
event.clientX;
Օրինակ
Էջի վրա մկնիկի շարժման ժամանակ մենք կցուցադրենք
nրա կոորդինատները դիտարկիչի պատուհանի նկատմամբ
(clientX և clientY).
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
