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>

6 个解决方案

#1

哪不对了？
还有。。
你看哪个不对？

#2

alert出来的坐标我看不出来它们各个地方哪里是原点，从哪开始计算的

#3

好多都没用过。。
不过测试可以看出。IE下。。

position:absolute时：
x\y:鼠标距离窗口内的位置

clientX\Y:鼠标距离窗口内的位置

offsetX\Y：鼠标距离触发event事件的元素的距离
screenX\Y:鼠标距离显示器顶部的距离。

#4

position:relative时：
x\y:鼠标距离触发event事件的元素的距离--同offsetX\Y一样

clientX\Y:鼠标距离窗口内的位置

offsetX\Y：鼠标距离触发event事件的元素的距离
screenX\Y:鼠标距离显示器顶部的距离。

#5

以上是测试得出的结果。。。

另外以上貌似只有clientX\Y兼容，FF，
所以做东西时推荐使用这个属性。。

#6

哦，谢谢

#1