event.clientX Özelliği
event.clientX özelliği,
fare imlecinin X eksenindeki koordinatlarını içerir.
Koordinatları belirlemek için ayrıca
event.clientY,
event.pageX,
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:
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 göre değil,
pencereye göre ölçülür.
pageX ve pageY nasıl çalışır:
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 olur.
Böylece pageX ve pageY, kaydırma dikkate alınarak
olayın koordinatlarını içerir.
Sözdizimi
event.clientX;
Örnek
Fare sayfa üzerinde hareket ettirilirken,
tarayıcı penceresine göre koordinatlarını
(clientX ve clientY) yazdıralım:
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
