当前位置: 代码迷 >> JavaScript >> client.x ,client.y,offset.x,它们坐标原点在哪啊该怎么处理
  详细解决方案

client.x ,client.y,offset.x,它们坐标原点在哪啊该怎么处理

热度:543   发布时间:2012-02-13 17:20:26.0
client.x ,client.y,offset.x,它们坐标原点在哪啊
哪位大哥告诉我以下几个属性的坐标原点,alert出来的坐标咋看都不对劲,谢谢


position:absolute时:  
window.event:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。   本例是相对于窗口。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。  
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。

例二:

position:relative时:  
window.event:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。   本例是相对于表格。
clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域。  
offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕。


<table   border=0   cellpadding=0   cellspacing=0   style= "position:absolute;left:100;top:100 ">
<tr> <td>
<div   onclick= "show() "   style= "background:#ff9966;cursor:hand ">
点击这里!  
</div>
</td> </tr>
</table>
<script>
function   show(){
alert( "window.event.x: "+window.event.x+ "\nwindow.event.y: "+window.event.y+ "\nevent.clientX: "+event.clientX+ "\nevent.clientY: "+event.clientY+ "\nevent.offsetX: "+event.offsetX+ "\nevent.offsetY: "+event.offsetY+ "\nwindow.event.screenX: "+window.event.screenX+ "\nwindow.event.screenY: "+window.event.screenY);
}
</script>
<br> <br> <br> <br> <br> <br> <br> <br>
<table   border=0   cellpadding=0   cellspacing=0   style= "position:relative;left:100;top:100 ">
<tr> <td>
<div   onclick= "show1() "   style= "background:#ff9966;cursor:hand ">
点击这里!
</div>
</td> </tr>
</table>
<script>
function   show1(){
alert( "window.event.x: "+window.event.x+ "\nwindow.event.y: "+window.event.y+ "\nevent.clientX: "+event.clientX+ "\nevent.clientY: "+event.clientY+ "\nevent.offsetX: "+event.offsetX+ "\nevent.offsetY: "+event.offsetY+ "\nwindow.event.screenX: "+window.event.screenX+ "\nwindow.event.screenY: "+window.event.screenY);
}
</script>




------解决方案--------------------
哪不对了?
还有。。
你看哪个不对?
  相关解决方案