`

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` 是JavaScript中用于描述鼠标位置和元素相对位置的一系列属性。下面我们将详细分析这些属性的区别和应用场景。 1. **screenX**: 这个...

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

    在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...

    鼠标事件clientX、clientY

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

    JS中坐标表示方法的异同

    本文将详细介绍`clientX`、`screenX`、`pageX`、`offsetX`等坐标系统的概念及其差异，并通过实例来帮助理解这些概念。 #### 二、`pageX`与`pageY` **定义：** `pageX`与`pageY`表示鼠标相对于整个文档的X轴和Y轴的...

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

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

    document-create-touch.rar_touch

    document.createTouch(view, target, identifier, screenX, screenY, clientX, clientY, pageX, pageY, radiusX, radiusY, rotationAngle, force) ``` 参数解释如下： 1. `view`：通常为`window`对象，表示触控...

    JavaScript第九天.xmind

    2.pageX，pageY(对于整个页面来说，包括被卷去的body部分的长度) 3.screenX，screenY(点击位置距离当前电脑屏幕的x，y坐标) 4.offsetX，offsetY(鼠标相对于事件源元素的x，y坐标) 元素的offset属性： 1....

    原生JS实现拖拽图片效果

    首先，我们要了解在JavaScript事件处理中，event对象提供了几个与鼠标位置相关的属性，它们分别是clientX、offsetX、screenX和pageX。这些属性在处理拖拽操作时起着至关重要的作用： 1. clientX：表示鼠标相对于...

    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

    js实现获取鼠标当前的位置

    通过clientX和clientY属性获取客户区坐标，通过pageX和pageY属性获取页面坐标，以及通过screenX和screenY属性获取屏幕坐标。这些技术点在动态交互的Web页面设计中非常实用，可以广泛应用于拖拽操作、绘图应用、鼠标...

    显示鼠标坐标信息 JavaScript代码

    - 当处理滚动时，`pageX`和`pageY`会考虑页面的滚动位置，而`clientX`和`clientY`则不会。 - 在移动设备上，由于触摸操作，可能需要监听`touchmove`事件而非`mousemove`。 5. **示例代码** 下面是将鼠标坐标显示...

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

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

    Javascript 获取鼠标当前的位置实现方法

    pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); } if (pageY === undefined) { pageY = event.clientY + (document.body.scrollTop || document.documentElement...

    Javascript dom位置、大小、鼠标定位操作

    理解这些属性之间的差异至关重要，例如，`event.clientX` 和 `event.clientY` 是相对于窗口的，而`event.pageX` 和 `event.pageY` 则是相对于整个文档的。`event.offsetX` 和 `event.offsetY` 是相对于元素的可见...

    JavaScript获取鼠标位置和鼠标与div的相对位置

    为了获得更准确的结果，可以使用`pageX`和`pageY`，它们包含了滚动条的偏移，但不考虑页面缩放。如果需要考虑页面缩放，可以使用`screenX`和`screenY`，它们提供了屏幕坐标，但可能过于绝对。 4. **优化性能：** ...

    js Event对象的5种坐标

    pageX = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; pageY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop; } ``` 此外，还要考虑到...

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