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>

　　

screenX clientX pageX的区别的更多相关文章

  1. 理解screenX clientX pageX概念

    先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX: 跟s ...

  2. screenX clientX pageX区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  3. screenX, clientX, pageX

    screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...

  4. 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

    通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: & ...

  5. JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

    楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽 ...

  6. screenX、clientX、pageX的区别

    screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角 ...

  7. pageX，clientX，screenX，offsetX的区别

    pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不 ...

  8. 鼠标事件以及clientX、offsetX、screenX、pageX、x的区别

    鼠标事件 鼠标事件有下面这几种: 1. onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 2. onmousedown 鼠标按下事件 ...

  9. event对象中offsetX,clientX,pageX,screenX的区别

    1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐 ...

随机推荐

  1. shell与kernel的理解 转载

    Shell 的英文释义是外壳,与 kernel 内核名词遥相呼应,一外一内,一壳一核.内核就像瑞士银行的金库,存放着客户的黄金等众多的(硬件)资产,闲杂人等(包括客户)当然是严格禁止入内的,而作为客户 ...

  2. 使用Windows安装的最高版本IE内核加载内嵌页(转载)

    客户端程序内嵌Webbrowser控件时,默认情况都是使用IE7兼容模式打开网页的.但是IE7有很多新的特性不支持,导致无法正常显示出来,所以需要强制使用高版本的IE内核来加载.渲染. void Ch ...

  3. HTTP传送协议

    HTTP传送协议--学习笔记 HTTP数据传输格式 基本格式为: 请求或应答行 请求或应答头部 空行 数据 POST传送格式 底层数据通信: 客户端请求: POST /response.php HTT ...

  4. BZOJ 2561 最小生成树（最大流）

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2561 题意:给定一个边带正权的连通无向图G= (V,E),其中N=|V|,M=|E|,N ...

  5. iOS深入学习（UITableView系列4：使用xib自定义cell）

    可以通过继承UITableViewCell重新自定义cell,可以像下面一样通过代码来自定义cell,但是手写代码总是很浪费时间, ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  6. Spring注解【非单例】

    花了至少一整天的时间解决了这个问题,必须记录这个纠结的过程,问题不可怕,思路很绕弯. 为了能说清楚自己的问题,我都用例子来模拟. 我有一个类MyThread是这样的: @Service public ...

  7. Date Picker Calendar For Oracle Forms 6i

    Giving date picker calendar option to user for date type fields in Oracle Forms. I am providing you ...

  8. fzu 1015 土地划分（判断线段相交+求出交点+找规律）

    链接:http://acm.fzu.edu.cn/problem.php?pid=1015  Problem 1015 土地划分 Accept: 714    Submit: 1675Time Lim ...

  9. Codeforces Round #272 (Div. 2) C. Dreamoon and Sums 数学

    C. Dreamoon and Sums time limit per test 1.5 seconds memory limit per test 256 megabytes input stand ...

  10. 个人博客Week3

    必应软件客户端测评 话不多说 先来一张高大上的客户端界面截图! 首先 映入眼帘的就是四个主要的模块!(1)词典(2)例句(3)翻译(4)应用 (1)词典: 在查询词条的时候,一旦查询了一个词条就不能够 ...