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.

Javascript clientX ve clientY kulanımı

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.

Yorumlar

Yorum Yapabilmek İçin Giriş Yapmalısınız.
İlk Yorum Yapan Sen Ol!
Uçur Beni Kahramanım Yukarı Çık
Bu web sitesi çerezleri kullanıyor. Devam ederek çerez kullanımını kabul etmiş oluyorsunuz. Detay

Devam Etmek İçin Giriş Yapın

Kod Hocası İle Paylaşımda bulunabilir, Kendini geliştirebilirsin. Sende Hemen Giriş Yap Aramıza Katıl.

GirişKayıt Ol