Javascript clientX ve clientY kulanımı

Javascript

clientX 

ve

clientY 

kullanımı ile bir html elemanı üzerinde mouse kordinatlarını elde edebilmekteyiz.

Kullanımı :

event.clientX

ve

event.clientY

clientX 

methodu X ekseni üzerinde mouse un yatay hareketlerini dinleyerek geri döndürmektedir.

clientY 

methodu ise Y ekseni üzerinde dikey hareketleri dinleyerek geriye değer döndürmektedir.

<div onmousemove="simple()" style="width:50px; height: 50px; background: orange;"></div>

function simple() {
	console.log("X : "+ event.clientX + " Y :" + event.clientY);
}

Yukarıdaki örnek üzerinde bir div oluşturduk ve bu div in görünmesi için genişliği yüksekliği tanımlanarak arka plan atanmış. mouse ile bu div üzerine gelindiğin ve her mouse hareketi sağlandığında kutu içerisindeki mouse un X ve Y eksen kordinatlarını console üzerine aşağıdaki gibi yazacaktır.

Mouse kordinatlarını alarak aslında bir çok örnek yapabilmekteyiz bunlardan bir diğeri ise iki resim arasındaki farkı bul gibi örnekler sağlayabilmekteyiz.