IE8不支持的PageXY 相对于整个页面鼠标的位置 包括溢出的部分
event.pageX;
event.pageY;
所有浏览器支持的： 相对于当前浏览器窗口可视区域的坐标
event.clientX;
event.clientY;
相对于当前屏幕（和浏览器窗口大小无关）的坐标
event.screenX;
event.screenY;
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
document.onmousemove = function(event){
var event = event||window.event;
var oDiv = document.getElementById("div1");
function byName(name){
return document.getElementsByName(name)[0]
}
byName("pageX").value = event.pageX;
byName("pageY").value = event.pageY;
byName("clientX").value = event.clientX;
byName("clientY").value = event.clientY;
byName("screenX").value = event.screenX;
byName("screenY").value = event.screenY;
byName("scrollLeft").value = document.body.scrollLeft||document.documentElement.scrollLeft;
byName("scrollTop").value = document.body.scrollTop||document.documentElement.scrollTop;
//为了兼容IE8 所以才用下面的方法
oDiv.style.top =event.clientY+(document.body.scrollTop||document.documentElement.scrollTop)+"px";
oDiv.style.left =event.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft)+"px";
//oDiv.style.top =event.pageY+"px";
//oDiv.style.left = event.pageX+"px";
}
}
</script>
</head>
<body style=" height: 2000px;">
<div style="position:fixed;top:0;left:0;">pageX:<input type="text" name="pageX" />相对页面IE8以及更早版本不支持<br>
pageY:<input type="text" name="pageY" /><br>
clientX:<input type="text" name="clientX" />相对于网页的可视区域<br>
clientY:<input type="text" name="clientY" /><br>
screenX:<input type="text" name="screenX" />相对于屏幕，和浏览器窗口大小无关！<br>
screenY:<input type="text" name="screenY" /><br>
scrollTop:<input type="text" name="scrollTop" /><br>
scrollLef:<input type="text" name="scrollLeft" /><br>
</div>
<div id="div1" style="position:absolute; left:0;top:0; width:100px; height:100px; background:red;">1</div>
</body>
</html>
时间： 2024-10-29 19:08:37