clientX/clientY 与 screenX/screenY 的区别
在JavaScript当中有时候我们需要获取鼠标悬停的位置，以此来做一些特殊处理。这时候就需要用到MouseEvent对象。MouseEvent对象提供了两组属性来定位鼠标的位置：clientX/clientY和screenX/screenY。除了这两组属性我们经常还会用到pageX/pageY和offsetX/offsetY这两组属性也是用来定位鼠标的，那么他们究竟有什么异同呢。
属性说明
clientX/clientY
名称 说明 返回 clientX 返回事件触发时鼠标相对于元素视口 的X坐标 数值 clientY 返回事件触发时鼠标相对于元素视口 的Y坐标 数值 这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。
screenX/screenY
名称 说明 返回 screenX 返回事件触发时鼠标相对于屏幕 的X坐标 数值 screenY 返回事件触发时鼠标相对于屏幕 的Y坐标 数值 顾名思义，screenX是鼠标距离显示器屏幕左边框的距离，screenY是鼠标距离显示器屏幕上边框的距离。
pageX/pageY
名称 说明 返回 pageX 返回事件触发时鼠标相对于文档 的X坐标 数值 pageY 返回事件触发时鼠标相对于文档 的Y坐标 数值 所谓文档可以简单的理解为浏览器中的页面内容，pageX是鼠标距离文档左侧的距离，pageY是鼠标距离文档上侧的距离，如果我们将鼠标悬停在浏览器中间，通过滚轮滚动浏览器，那么尽管没有移动鼠标的位置而pageY一直在变化，因为相对文档顶部的距离一直在变化。
offsetX/offsetY
名称 说明 返回 offsetX 返回事件触发时鼠标相对于事件指向元素 的X坐标 数值 offsetY 返回事件触发时鼠标相对于事件指向元素 的Y坐标 数值 假设有一个元素
<p>test</p>当鼠标进入元素中触发事件时这是offsetX指的就是鼠标到P元素左边的距离。但是这个属性并不是标准属性，因此IE和chrome对这个属性的支持并不一样。在chrome中offsetX和offsetY的值均为整数，而在IE中值为小数形式，并且如果元素有border属性也会影响到offsetY的计算。
示例代码
mouseover.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="../css/test.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js/eventtest.js"></script>
</head>
<body>
<div class="container">
<!--可以在这里随意添加一些内容，方便看出pageY和其他属性的区别-->
<div class="section" >
</div>
<hr>
<div class="section" >
<h3>clientX 和 screenX</h3>
<div class="example">
<p id="position">
please move mouse into this area.<br />
clientX是到浏览器左侧的距离，screenX是到显示屏左侧的距离。通过缩小浏览器的大小可以明显看出变化
</p>
</div>
</div>
</div>
</body>
</html>test.css
div.container{
width:980px;
margin-left: auto;
margin-right: auto;
}
div.example{
height: 100px;
border:solid 1px #ccc;
background:#f8f8f8;
}
pre{
border:solid 1px #ccc;
background:#f8f8f8;
}
#banana{
font-family: FreeSerif;
font-size: 20px;
background: yellow;
}
#position{
border:solid 1px #ccc;
margin-left: 20px;
}
eventtest.js
/**
* Created by qiumingsheng on 2015/8/27.
*/
$(function(){
$('#position')[0].addEventListener("mousemove",handlePositionEvent);
$('#position')[0].addEventListener("mouseout",handlePositionEvent);
function handlePositionEvent(e){
if(e.type == 'mousemove'){
$(e.target).html("clientX:"+ e.clientX+" clientY:"+e.clientY
+"<br />"+"screenX:"+ e.screenX +" screenY:"+e.screenY
+"<br />"+"pageX:"+ e.pageX+" pageY:"+e.pageY
+"<br />"+"offsetX:"+ e.offsetX+" offsetY:"+e.offsetY);
}else{
$(e.target).text(" please move mouse into this area.");
}
};
});