screenX clientX pageX的区别

来源：互联网发布：mac可以玩什么国内网游编辑：程序博客网时间：2024/05/22 01:54

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动

如图(红点就是鼠标当前位置)

参考代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>    <style>        body {            margin: 0;            padding: 0;        }        .div {            text-align: center;            font-size: 24px;            height: 300px;            width: 1300px;            line-height: 300px;            color: yellow;        }        #d1 {            background-color: red;        }        #d2 {            background-color: green;        }        #d3 {            background-color: blue;        }        #d4 {            position: absolute;            background-color: yellow;            height: 150px;            width: 120px;            top: 0;        }    </style>    <script type="text/javascript">        $(function () {            window.onscroll = function () {                $("#d4").css("top", getScrollTop());            };            document.onmousemove = function (e) {                if (e == null) {                    e = window.event;                }                var html = "screenX:" + e.screenX + "<br/>";                html += "screenY:" + e.screenY + "<br/><br/>";                html += "clientX:" + e.clientX + "<br/>";                html += "clientY:" + e.clientY + "<br/><br/>";                if (e.pageX == null) {                    html += "pageX:" + e.x + "<br/>";                    html += "pageY:" + e.y + "<br/>";                } else {                    html += "pageX:" + e.pageX + "<br/>";                    html += "pageY:" + e.pageY + "<br/>";                }                $("#d4").html(html);            };        });        function getScrollTop() {            var top = (document.documentElement && document.documentElement.scrollTop) ||              document.body.scrollTop;            return top;        }    </script></head><body>    <div id="d1" class="div">div1 height:300px width:1300px</div>    <div id="d2" class="div">div2 height:300px width:1300px</div>    <div id="d3" class="div">div3 height:300px width:1300px</div>    <div id="d4"></div></body></html>

0 0