event.pageX Özelliği
event.pageX özelliği,
fare imlecinin X eksenindeki koordinatlarını içerir.
Koordinatları belirlemek için ayrıca
event.clientX,
event.clientY,
event.pageY
özellikleri de vardır.
clientX/clientY
ile pageX/pageY arasındaki farka bir göz atalım.
clientX ve clientY nasıl çalışır:
eğer 1000 x 1000
piksel boyutunda bir pencereniz varsa ve fare ortadaysa, clientX
ve clientY her ikisi de 500 olacaktır. Eğer
daha sonra imleci hareket ettirmeden sayfayı yatay veya
dikey olarak kaydırırsanız, clientX ve clientY değerleri
değişmeyecektir, çünkü bunlar belgeye değil, pencereye göre ölçülür.
pageX ve pageY nasıl çalışır:
eğer 1000 x 1000
piksel boyutunda bir pencereniz varsa ve imleç ortadaysa,
pageX ve pageY 500 olacaktır. Eğer
daha sonra sayfayı aşağı doğru 250
piksel kaydırırsanız, pageY 750 olacaktır.
Böylece pageX ve pageY, kaydırma dikkate alınarak
olayın koordinatlarını içerir.
Sözdizimi
event.pageX;
Örnek
Fare sayfa üzerinde hareket ettikçe,
tarayıcı penceresine göre koordinatlarını
(pageX ve pageY) yazdıralım:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.pageX + ' : ' + event.pageY;
});
:
