js 关于鼠标在页面中坐标显示的种种
首先先看一段代码
关于javascript中clientX，pageX，offsetX，x，layerX，screenX,offsetLeft之类的图解说明
对clientX等的文字说明
offsetTop
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
offsetLeft
获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetHeight
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度。
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
offsetWidth
获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度。
offsetParent
获取定义对象 offsetTop 和 offsetLeft 属性的容器对象的引用。
clientHeight
获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
clientLeft
获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop
获取 offsetTop 属性和客户区域的实际顶端之间的距离。
clientWidth
获取对象的宽度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
SCROLL属性
scroll
设置或获取滚动是否关闭。
scrollHeight
获取对象的滚动高度。
scrollLeft
设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop
设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
scrollWidth
获取对象的滚动宽度。event属性
x
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
screenX
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标
W3C关于screen给出的例子
offsetX
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
clientX
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条
W3C对于client给出的例子
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同，点击这里查看。
这四种浏览器分别为IE（Internet Explorer）、NS（Netscape）、Opera、FF（FireFox）。
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。
但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
IE不支持！
offsetX/offsetY:
得出的结果跟pageX/pageY一样，既然如此，它有什么存在价值？因为：
只有IE支持！相当于IE下的pageX,pageY.
screenX/screenY:
就是鼠标在屏幕上的坐标。screenX,screenY的最大值不会超过你的屏幕分辨率。
clientX/clientY：
事件发生时鼠标在浏览器内容区域的X/Y坐标（不包含滚动条）。浏览器内容区域即浏览器窗口中用来显示网页的可视区域，注意这个可视，也就是说需要拖动滚动条才能看到的区域不算。当你将浏览器窗口缩小时，clientX/clientY的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域。
特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY与火狐下的始终大2px
1 楼 libmw 2010-09-30 很好，搜藏了 2 楼 hduyou 2010-09-30 libmw 写道很好，搜藏了
恩 欢迎共享 3 楼 webee 2010-10-08 看的眼花啊！实际只要知道这些属性就可以了，用的时候测试一两次就明白了！ 4 楼 suiye007 2010-10-08 其实重点就是那张图啊！
