event对应的各种坐标

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>