javascript获取鼠标坐标pageX和clientX的区别
这两种获取鼠标坐标的方法，区别在于基于的对象不同：
pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
测试代码：案例中点击红点，页面显示获取的距离，在滚动条滑动到不同距离时(不要太多了，不然看不到点击的红点了)，再次点击红点，然后查看获取的距离，只有clientY(滑动y轴滚动条时clientY改变)，clientX改变(滚动x轴滚动条时clientX改变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:0;padding:0;}
body{
width: 130%;
height: 1500px;
}
#wrap{
margin:300px auto;
width:500px;
height:200px;
border:1px solid red;
text-align: center;
overflow: hidden;
}
#wrap .text{
text-align: center;
line-height: 50px;
height: 50px;
}
#wrap .point{
width: 10px;
height: 10px;
border-radius: 50%;
background: red;
margin: 20px auto;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<p class="text">测试pageX和clientX的区别 点击红点</p>
<p class="point"></p>
<p class="mouse-position">
红点距离窗口左上角clientX: <span id="clientX">--</span>, clientY: <span id="clientY">--</span><br>
红点距离文档左上角pageX: <span id="pageX">--</span>, pageY: <span id="pageY">--</span>
</p>
</div>
</body>
<script>
window.onload=function(){
var oDiv = document.getElementById(wrap);
oDiv.onmousedown = function(e){
e = e || window.event;
console.log(e.clientX:+e.clientX+" e.clientY:"+e.clientY);
console.log(e.pageX:+e.pageX+" e.pageY:"+e.pageY);
document.getElementById(clientX).innerText = e.clientX;
document.getElementById(clientY).innerText = e.clientY;
document.getElementById(pageX).innerText = e.pageX;
document.getElementById(pageY).innerText = e.pageY;
}
}
</script>
</html>
本文主要是说明一下pageX、pageY与clientX、clientY的区别，便于理解。
