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. c++中char*\wchar_t*\string\wstring之间的相互转换

    string U2A(const wstring& str)//Unicode字符转Ascii字符 { string strDes; if ( str.empty() ) goto __end ...

  2. VC++ 利用MAPI实现在程序中调用默认的电子邮件程序发送EMAIL(可以添加附件)。

    1.利用ShellExecute 可以条用默认邮件客户端,但不能发送带附件的邮件 mailto:用户账号@邮件服务器地址?subject=邮件主题&body=邮件正文   如:ShellExe ...

  3. QQ邮箱

    yourTEXThere

  4. 修改ftp密码

    1.运行cmd2.在DOS窗口中输入FTP 127.0.0.13.出现用户名输入提示“user”,键入用户名,按回车4.出现输入密码提示:“Password”,键入密码后按回车登录到服务器中5.在ft ...

  5. SqlSever基础 union 联合查询，厉害的并集 重复项只显示一个 两个查询结果并在一起后排序

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  6. Linux内核中的GPIO系统之（3）：pin controller driver代码分析

    一.前言 对于一个嵌入式软件工程师,我们的软件模块经常和硬件打交道,pin control subsystem也不例外,被它驱动的硬件叫做pin controller(一般ARM soc的datash ...

  7. Maven开发基础总结(Maven自启动,Maven打war包,Maven热部署)

    学习内容: 1.不依赖外部Tomcat,自己启动方式部署 2.Maven打war包,远程部署到centOS 3.Maven热部署(不关闭Tomcat部署应用)   做maven开发前提: 1.编码UT ...

  8. iOS - UISplitViewController

    前言 NS_CLASS_AVAILABLE_IOS(3_2) @interface UISplitViewController : UIViewController @available(iOS 3. ...

  9. SAP供应商和客户的创建

    进来遇到一个创建供应商的需求,由于在系统中关于供应商和客户的创建比较特殊,且没有相关函数进行创建, 找到一个类和方法来创建,类名:VMD_EI_API  方法名:MAINTAIN_DIRECT_INP ...

  10. random使用

    package com.cz.test; import java.util.Random; public class RandomTest { public static void main(Stri ...