<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不支持外,其他浏览器均支持html
二、offsetX/offsetY: 特别说明:只有IE支持!相对于当前元素的位移(即:触发点相对被触发dom的左上角距离。不过左上角基准点在不一样浏览器中有区别,其中在IE中之内容区左上角为基准点不包括边框,若是触发点在边框上会返回负值,而chrome中以边框左上角为基准点。)。--兼容性:只有IE支持chrome
三、screenX/screenY:此时的参照点也就是原点是屏幕的左上角。--兼容性:全部浏览器均支持浏览器
四、clientX/clientY:跟screenX相比就是将参照点改为了浏览器内容区域的左上角,该参照点会随之滚动条的移动而改变。特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY与火狐下的始终大2px。--兼容性:全部浏览器均支持dom
图解:spa
demo地址:http://www.jo2.org/htmls/pageYclientYoffsetXscreenX.htmcode
参考:http://www.cnblogs.com/yehuabin/archive/2013/03/07/2946004.html http://jo2.org/clientxscreenxpagexoffsetx%E7%9A%84%E5%BC%82%E5%90%8C/ htm