clientX,screenX,pageX,offsetX的區別

<script>function mouseDown(ev)
{ev=ev||window.event;alert("page \r\n  X:"+ev.pageX+"  Y: "+ev.pageY+"\r\n client \r\n  X:"+ev.clientX+"  Y: "+ev.clientY+"\r\n screen \r\n  X:"+ev.screenX+" Y: "+ev.screenY+"\r\n X/Y \r\n  X:"+ev.X+"  Y: "+ev.Y+"\r\n offset \r\n X: "+ev.offsetX+"  Y:"+ev.offsetY);}
document.onmousedown=mouseDown;</script>

一、pageX/pageY：鼠標相對於整個頁面文檔（document）的X/Y座標。注意，整個頁面的意思就是你整個網頁的所有，它不會隨着滾動條而變更。特別說明：IE不支持！--兼容性：除IE6/7/8不支持外，其他瀏覽器均支持

二、offsetX/offsetY: 特別說明：只有IE支持！相對於當前元素的位移(即：觸發點相對被觸發dom的左上角距離。不過左上角基準點在不一樣瀏覽器中有區別，其中在IE中之內容區左上角爲基準點不包括邊框，若是觸發點在邊框上會返回負值，而chrome中以邊框左上角爲基準點。)。--兼容性：只有IE支持

三、screenX/screenY:此時的參照點也就是原點是屏幕的左上角。--兼容性：全部瀏覽器均支持

四、clientX/clientY：跟screenX相比就是將參照點改爲了瀏覽器內容區域的左上角，該參照點會隨之滾動條的移動而改變。特別說明：IE下此屬性不規範，它們的最小值不是0而是2，也就是說IE下的clientX/clientY與火狐下的始終大2px。--兼容性：全部瀏覽器均支持

 圖解：

demo地址：http://www.jo2.org/htmls/pageYclientYoffsetXscreenX.htm

參考：http://www.cnblogs.com/yehuabin/archive/2013/03/07/2946004.html    http://jo2.org/clientxscreenxpagexoffsetx%E7%9A%84%E5%BC%82%E5%90%8C/

    http://www.cnblogs.com/youxin/p/3380796.html