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

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

javascriptevent.clientX;

Օրինակ

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

Результат:

Տես նաև