在开发过程中。有时候会获取鼠标当前的坐标，主要分为三种，第一种是获取鼠标在屏幕中的坐标，第二种是获取鼠标在客户区中的坐标，第三种是获取鼠标在窗口页面中的坐标。
分别用的方法名称为screenX和screenY，clientX和clientY，pageX和pageY。
clientX/clientY
| clientX | 返回事件触发时鼠标相对于元素视口?的X坐标 | 数值 |
| clientY | 返回事件触发时鼠标相对于元素视口?的Y坐标 | 数值 |
这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。当鼠标停留在页面某个位置时，滚动鼠标滚动条，坐标会随着鼠标滚动条的改变而改变。
screenX/screenY
| screenX | 返回事件触发时鼠标相对于屏幕?的X坐标 | 数值 |
| screenY | 返回事件触发时鼠标相对于屏幕?的Y坐标 | 数值 |
顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。
pageX/pageY
| pageX | 返回事件触发时鼠标相对于文档?的X坐标 | 数值 |
| pageY | 返回事件触发时鼠标相对于文档?的Y坐标 | 数值 |
如果鼠标停留在网页中的某个位置，滚动鼠标滚动条，pageY不会因为鼠标滚动的滚动而改变。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="javascript"
src="${pageContext.request.contextPath}/script/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousemove(function(e) {
getScreenCoordinates(e);//获取鼠标在屏幕中的坐标
getClientCoordinates(e);//获取鼠标在窗口客户区中的坐标，会随着滚动条的滚动而变化
getPageCoordinates(e);//获取鼠标当前页面区域中的坐标，不会随滚动条滚动而变化
});
function getScreenCoordinates(e) {
x1 = e.screenX;
y1 = e.screenY;
$(".sp1").text("X1:" + x1 + ",Y1:" + y1);
}
function getClientCoordinates(e) {
x2 = e.clientX;
y2 = e.clientY;
$(".sp2").text("X2:" + x2 + ",Y2:" + y2);
}
function getPageCoordinates(e) {
x3 = e.pageX;
y3 = e.pageY;
$(".sp3").text("X3:" + x3 + ",Y3:" + y3);
}
});
</script>
</head>
<body>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>
鼠标当前屏幕的坐标为：<span class="sp1"></span>
</p>
<p>
鼠标当前窗口客户区坐标为：<span class="sp2"></span>
</p>
<p>
鼠标当前页面区域中的坐标为：<span class="sp3"></span>
</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</body>
</html>
?原文：http://673390302.iteye.com/blog/2301621