clientX

pageX/pageY :

鼠标相对于整个页面的X/Y坐标。注意，整个页面的意思就是你整个网页的全部，比如说网页很宽很长，宽2000px，高3000px，那pageX,pageY的最大值就是它们了。

特别说明：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

 

event.clientX 和 event.clientY 据微软说是除窗口装饰及滚动条外的鼠标离窗口最右边和最上边的距离。但是他的计算却是从（2,2）开始的，而不是（0,0），这两个像素存在于 document.documentElement.clientLeft 里面。

　　在标准模式（standards mode）下，clientX 是从 0 开始计算的，而在差异模式下（quirks mode，有没有更好的翻译？），是从2 开始的，但奇怪的是，测试两种模式都是从2,2 开始的。

　　实际上，这个值是分别存在于 document.documentElement.clientLeft 和 document.body.clientLeft 。在 standards mode 下面，document.documentElement.clientLeft 值为 2，document.body.clientLeft 为 0 。在 quirks mode 下面正好相反 document.documentElement.clientLeft 为 0 ，document.body.clientLeft 值为2 。

　　所以，想要得到准确的鼠标位置，必须：

1. x = event . clientX - document . documentElement . clientLeft - document . body . clientLeft ;
2. y = event . clientY - document . documentElement . clientTop - document . body . clientTop ;

　　注意，以上代码仅适用于IE，firefox两个值都是undefined。

 

假设 obj 为某个 HTML 控件。

offsetTop、offsetLeft

• obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素
• obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。

offsetWidth、offsetHeight

• obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。
• obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度，整型，单位像素。

offsetParent可能是元素的父元素 ,或是body元素 两种，如果为null,则按body计算