event.clientX хусусияти
event.clientX хусусияти
сичқон курсорининг X ўқи бўйича координатларини ўз ичига олади.
Координатларини аниқлаш учун шунингдек
event.clientY,
event.pageX,
event.pageY хусусиятлари мавжуд.
Келинг clientX/clientY билан
pageX/pageY ўртасидаги фарқни кўриб чиқайлик.
clientX ва clientY қандай ишлайди:
агар сизда 1000га 1000
пикселли дарёза бўлса, ва сичқон марказда бўлса, clientX
ва clientY иккаласи ҳам 500га тенг бўлади. Агар
сиз курсорни ҳаракатлантирмай, саҳифани горзонтал ёки
вертикал равишда айлантирсангиз, clientX ва clientY қийматлари
ўзгармайди, чунки улар дарёзага нисбатан ҳисобланади,
ҳужжатга нисбатан эмас.
pageX ва pageY қандай ишлайди:
агар сизда 1000га 1000
пикселли дарёза бўлса, ва курсор марказда бўлса,
pageX ва pageY 500га тенг бўлади. Агар
сиз саҳифани 250
пиксел пастга айлантирсангиз, pageY 750га тенг бўлади.
Шу тариқа pageX ва pageY воқеанинг координатларини
айлантиришни ҳисобга олган ҳолда ўз ичига олади.
Синтаксис
event.clientX;
Мисол
Сичқон саҳифа бўйиба ҳаракатланганда унинг
браузер дарёзасига нисбатан координатларини
чиқарамиз (clientX ва clientY):
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
