`

screenX clientX pageX的区别

 
阅读更多

 

转自：http://www.cnblogs.com/yehuabin/archive/2013/03/07/2946004.html

screenX clientX pageX概念

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>
 

 

补充：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

分享到：
| httpclient4.3 设置代理请求
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

    clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。

    [转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别

    NULL 博文链接：https://meizhi.iteye.com/blog/576133

    鼠标事件clientX、clientY

    clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY

    原生JS实现拖拽图片效果

    javascript event 对象的clientX,offsetX,screenX,pageX的区别： 用html5的drag来实现拖拽有兼容性问题，使用拖拽插件代码又很多，而这个拖拽demo代码少，并且兼容所有浏览器，很值得在项目中使用， css样式如下： ...

    JS获取鼠标坐标位置实例分析

    取鼠标坐标位置有这些：鼠标在视口的坐标位置(clientX,clientY),鼠标在页面的坐标位置(pageX,pageY),鼠标在屏幕的坐标位置(screenX,screenY)，其中鼠标在视口的坐标位置(clientX,clientY),以及鼠标在屏幕的坐标位置...

    touch:轻量级移动端触摸手势库

    回调函数的参数回调函数里面的参数event包含4个属性:pagex,pageY,clientX,clientY,screenX,screenY,direction,displacementX,displacementY.screenX事件发生时手指触摸位置距离屏幕左上角的X方向(水平)距离.screenY...

    vue实现拖拽效果

    首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3（事件对象中记录的鼠标位置） 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览器的客户端左上角为原点...

    Swiper-master touchjs-master TweenJS-master zepto-master

    Swiper-master是纯...重要属性如下：clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY：触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID

    JavaScript中获取鼠标位置相关属性总结

    javascript并没有mouse对象，获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove，就可以实时获得鼠标位置。 但是！！event中和鼠标相关的属性太多了，很让人头...而且他们的区别并不明显，各浏览器间

    js实现百度登录框鼠标拖拽效果

    以百度的登录窗口为例，学习鼠标拖拽效果...2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 3.pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条

    dom

    垂直坐标pageX，pageY：事件属性返回当事件被触发时鼠标指针相对于整个页面左上角的水平坐标，垂直坐标screenX，screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标，垂直坐标，此时的参照点也...

Magicbox
Global site tag (gtag.js) - Google Analytics