cript获取鼠标坐标pageX和clientX的区别
这两种获取鼠标坐标的方法，区别在于基于的对象不同：
pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
测试代码：
-
<!DOCTYPE html> -
<html lang="en"> -
<head> -
<meta charset="UTF-8"> -
<title>测试pageX和clientX的区别</title> -
<style> -
*{margin:0;padding:0;} -
body { -
height:3000px; -
width:3600px; -
} -
#wrap{ -
margin:300px auto; -
width:500px; -
height:200px; -
border:1px solid red; -
text-align: center; -
overflow: scroll; -
} -
#wrap p{ -
height:400px; -
} -
</style> -
</head> -
<body> -
<div id="wrap"> -
<p>测试pageX和clientX的区别</p> -
</div> -
</body> -
<script> -
window.onload=function(){ -
var oDiv = document.getElementById('wrap'); -
oDiv.onmousemove = 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); -
} -
} -
</script> -
</html>
8437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
