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>

 

你可能感兴趣的:(event)