event.pageX хусусияти
event.pageX хусусияти
сичқонча курсорининг X ўқи буйича координаталарини ўз ичига олади.
Координаталарини аниқлаш учун янада
event.clientX,
event.clientY,
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.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;
});
:
