clientX özelliği, pencerenin içerik alanında fare işaretçisinin soldan olan uzaklığını, clientY özelliği ise üstten olan uzaklığını verir. Firefox ve Opera tarayıcılarında sadece okunabilir olan bu özelliklere Internet Explorer tarayıcısında değer atanabilir.
Sözdizimi
yatay = event.clientX
dikey = event.clientY
Dönüş Değeri
yatay | Fare işaretçisinin soldan piksel olarak uzaklığı. |
dikey | Fare işaretçisinin üstten piksel olarak uzaklığı. |
clientX ve clientY değerleri daima pencerenin görünen içeriğini hesaplayarak değer döndürürler. Sürükleme çubukları farklı konumlara sürüklense dahi pencerenin görünen içerik alanının sol-üst noktası her ikisi içinde daima '0' (sıfır) olacaktır.
Aşağıdaki örnek, fare işaretçisinin sayfa üzerinde bulunduğu konumların clientX ve clientY özellikleri ile dinamik olarak öğrenilmesini göstermektedir.
<div id="ornekDiv" style="width:200px; height:40px; background-color:#CCDDFF; padding:10px;">
</div>
<script type="text/javascript">
var div = document.getElementById('ornekDiv');
function fareOku(olay) {
olay = olay || event;
var yazilacak = "Soldan = " + olay.clientX + "<br/>" + "Üstten = " + olay.clientY;
div.innerHTML = yazilacak;
}
document.onmousemove = fareOku;
</script>
Canlı Sonuç