码迷,mamicode.com
首页 > 其他好文 > 详细

screenX clientX pageX的区别

时间:2014-11-11 16:01:37      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   os   java   sp   

screenX clientX pageX概念

打开的pop窗口随着鼠标点击的dom元素而定位展示的js代码:

e是click事件,o是pop窗口的宽度或高度,

eventX = function (e, o) {
  e = e || window.event;
  o = o || 0;
  x = e.pageX || e.clientX + document.body.scroolLeft;
  return x + o > screen.availWidth ? screen.availWidth - o : x - o / 2 < 0 ? 0 : x - o / 2;
 }

 

eventY = function (e, o) {
  e = e || window.event;
  o = o || 0;
  alert(‘clientY = ‘ + e.clientY);
  y = e.pageY || e.clientY + document.body.scrollTop;
  return y + o > screen.availHeight ? screen.availHeight - o : y - o / 2 < 0 ? 0 : y - o / 2;
 }

 

 

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

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动,也就是说,他计算left或top时直接忽略了滚动条的高和宽,它的参考点是浏览器可见区域的左上角,而不是页面本身的body左上角原点,计算数值和滚动条是否滚动没有关系,只是绝对的计算鼠标点距离浏览器内容区域的左上角的距离,忽略了滚动条的存在。

pageX:参照点是页面本身的body原点,而不是浏览器内容区域左上角,它计算的值不会随着滚动条而变动,它在计算时其实是以body左上角原点(即页面本身的左上角,而不是浏览器可见区域的左上角)为参考点计算的,这个相当于已经把滚动条滚过的高或宽计算在内了,所以无论滚动条是否滚动,他都是一样的距离值。

 

所以基本可以得出结论:

pageX > clientX, pageY > clientY

pageX = clientX + ScrollLeft(滚动条滚过的水平距离)

pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

 

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

bubuko.com,布布扣

参考代码

<!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>

screenX clientX pageX的区别

标签:style   blog   http   io   color   ar   os   java   sp   

原文地址:http://www.cnblogs.com/itjeff/p/4089584.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!