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