Javascript clientX ve clientY kulanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #clientx #clienty

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.