event.x ve event.y

x ve y özellikleri, pencerenin içerik alanında fare pozisyonunun konumunu döndürürler. event.x soldan uzaklığı, event.y üstten olan uzaklığı piksel olarak verir.

Bu özelliklerin diğer tarayıcılar için alternatifleri clientX ve clientY özellikleridir.

Sözdizimi

yatay = event.x

dikey = event.y

Dönüş Değeri

yatay	Fare işaretçisinin, içerik alanındaki soldan uzaklığı.
dikey	Fare işaretçisinin, içerik alanındaki üstten uzaklığı.

Aşağıdaki örnek, fare işaretçisinin, sistem ekranına, komple doküman alanına ve tarayıcının görünen içerik alanına göre konum değerlerini göstermektedir.


<style type="text/css">
#bilgiKutu {
    width:250px;
}
#anaTablo {
    width:300px;
    height:150px;
}
#ornekTablo, #ornekDiv {
    width:100%;
    height:100%;    
    text-align:center;
    color:white;
    font-weight:bold;
}
</style>

<table id="anaTablo"><tr><td width="50%">

<table id="ornekTablo" style="background-color:#55AA55;"><tr><td>
Tablo Sütunu
</td></tr></table>

</td><td width="50%">

<div id="ornekDiv" style="background-color:#5555AA; display:block;"> DIV </div>

</td></tr></table>

<div id="bilgiKutu"></div>

<script type="text/javascript">

var bilgiKutu = document.getElementById('bilgiKutu');

function yakala()
{
    var yazilacak = "offsetX : " + event.offsetX +
                "<br/>offsetY : " + event.offsetY +
                "<br/>screenX : " + event.screenX +
                "<br/>screenY : " + event.screenY +
                "<br/>X : " + event.x +
                "<br/>Y : " + event.y;
                
    bilgiKutu.innerHTML = yazilacak;
}

document.onmousemove = yakala;
</script>

Test Edin

Tablo Sütunu

DIV

İlgili Başlıklar