clientX,offsetX,layerX,pageX,screenX,X有时容易记混，通过测试当前的主流浏览器疏理了自己的一些看法以供参考。

Chrome下（测试版本为51.0.2704.106 ）：

　　由上图可见题目中的6种属性可分为三大类：

　　1.鼠标指针相对于屏幕的坐标：screenX/Y

　　2.相对于页面且不考虑滚动条是否滚动：clientX/Y,X/Y

　　3.相对于页面且考虑滚动条：pageX/Y,layerX/Y,offsetX/Y

　　下面着重讨论2,3。

　　红色对应上文的2类。div3设置了50px的border，可以看到offsetX的数值未包含左边框的50px。下面看一个行内块的：

　　可见offsetX/Y为鼠标指针相对于当前元素（块级或行内块）且不包含边框的坐标，行内元素则无效（返回父级的坐标）。（51版本的chrome下）

　　其他浏览器的情况怎么样呢？

火狐下（测试版本为47.0.1）：

　　

　　47版本的火狐不支持x/y，其他表现与51版本的chrome相同。

Safari（测试版本为5.1.7）下：

　　Safari(5.1.7)下offsetX/Y为鼠标指针相对于当前元素（块级或行内块）且包含边框的坐标。

IE11：

　　IE11下layerX/Y未包括滚动条距离；pageX/Y与clientX/Y精确到了小数。offsetY出现小数大概是因为dddd的line-height设置为45px。

　　另：Opera(版本38.0.2220.41)表现与chrome一致。

　　下面是w3c关于各属性的解释：

　　pageX/Y被划到了jq里：

　　没找到layerX/Y的官方文档。

　　总结：

　　推荐使用：

　　screenX/Y：鼠标位置相对于屏幕的坐标

　　pageX/Y：相对于文档边缘（包含滚动条距离）

　　clientX/Y：相对于当前页面且不包含滚动条距离

　　offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。

　　其他：

　　X/Y：与clientX/Y相同，firefox不支持

　　layerX/Y：除IE外与pageX/Y相同，IE11下与clientX/Y相同。非官方属性。

　　测试代码：

<!DOCTYPE html>

<html>

<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: #FF3B2F;

        }

        #d2 {

            background-color: #4CDA64;

        }

        #d3 {

            background-color: #007AFF;

            border: 50px solid #004400;

            width: 500px;

            display: inline-block;

        }

        #d3-2{

        	background-color: #FF2C55;

        	width: 500px;

        	border: 10px solid #019EE4;

        	display: inline-block;

        }

        #d4 {

            position: absolute;

            background-color: #FFCC00;

            height: 340px;

            width: 120px;

            top: 0;

            bottom: 0;

            left: 50px;

            margin: auto 0;

            font-family: "arial";

            font-size: 16px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            document.onmousemove = function (e) {

                if (e == null) {

                    e = window.event;

                }

                var html = "<span style='color:#000'>screenX:" + e.screenX + "</span><br/>";

                html += "<span style='color:#000'>screenY:" + e.screenY + "</span><br/><br/>";

                html += "<span style='color:#f00'>clientX:" + e.clientX + "</span><br/>";

                html += "<span style='color:#f00'>clientY:" + e.clientY + "</span><br/><br/>";

  				html += "<span style='color:#f00'>x:" + e.x + "</span><br/>";

                html += "<span style='color:#f00'>y:" + e.y + "</span><br/><br/>";

                html += "<span style='color:#00f'>layerX:" + e.layerX + "</span><br/>";

                html += "<span style='color:#00f'>layerY:" + e.layerY + "</span><br/><br/>";

                html += "<span style='color:#00f'>pageX:" + e.pageX + "</span><br/>";

                html += "<span style='color:#00f'>pageY:" + e.pageY + "</span><br/><br/>";

				html += "<span style='color:#070'>offsetX:" + e.offsetX + "</span><br/>";

                html += "<span style='color:#070'>offsetY:" + e.offsetY + "</span><br/>";

                $("#d4").html(html);

            };

        });

    </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:500px</div>

    <div id="d3-2" class="div">div3-2 height:300px width:500px <span style="width:50px;height:50px;background:#000;display: inline-block;border: 5px solid #fff;line-height: 45px;">dddd</span></div>

    <div id="d4"></div>

</body>

</html>

　　

　　参考：HTML DOM Event 对象

screenX clientX pageX的区别

　　五年前的兼容情况：各浏览器的鼠标位置测试

clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解的更多相关文章

  1. pageX,clientX,offsetX,layerX的区别

    pageX,clientX,offsetX,layerX的区别 在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结 ...

  2. clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解

    clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距 ...

  3. jQuery中 pageX,clientX,offsetX,layerX的区别

    一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0 ...

  4. pageX,clientX,offsetX,layerX的那些事

    在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个 ...

  5. js-offsetX、pageX、clientX、layerX、screenX

    真心地我也是懵逼的 clientX,clientY:针对屏幕有效区域,不包括滚动部分,坐标(0,0)一直在有效区域的左上角 X,Y:            针对屏幕有效区域,不包括滚动部分,坐标(0, ...

  6. 原生js和jquey获取窗口宽高，滚动条，鼠标位置总结

    JQuery获取浏览器窗口的可视区域高度和宽度,滚动条高度   alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height( ...

  7. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  8. 原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

    关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.sc ...

  9. pageX, clientX ,screenX, offsetX, layerX, ,x的区别

    事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY ...

随机推荐

  1. 内核blackhole

    1) 当arp表项不存在的时候,数据包等待表项存在了再发,还是直接把数据包给丢掉; 2)如果网络目的地址不可达,是在那一层把数据丢弃,再是路由层就判断还是arp层呢?

  2. 使用gdb查看栈帧的情况，有ebp

    0x7fffffffdb30:    0x00000000    0x00000000    0xf7ffe700    0x0000001a0x7fffffffdb40:    0xffffdc98 ...

  3. 第52天：offset家族、scroll家族和client家族的区别

    一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...

  4. 【bzoj1606】[Usaco2008 Dec]Hay For Sale 购买干草 背包dp

    题目描述 约翰遭受了重大的损失:蟑螂吃掉了他所有的干草,留下一群饥饿的牛．他乘着容量为C(1≤C≤50000)个单位的马车,去顿因家买一些干草．  顿因有H(1≤H≤5000)包干草,每一包都有它的体 ...

  5. Go语言【第三篇】：Go变量和常量

    Go语言变量 变量来源于数学,是计算机语言中能存储计算结果或能表示值抽象概念.变量可以通过变量名访问.Go语言变量名由字母.数字.下划线组成,其中首字母不能为数字,声明变量的一般形式是使用var关键字 ...

  6. 楼房 洛谷1382 && codevs2995

    P1382 楼房 题目描述 地平线(x轴)上有n个矩(lou)形(fang),用三个整数h[i],l[i],r[i]来表示第i个矩形:矩形左下角为(l[i],0),右上角为(r[i],h[i]).地平 ...

  7. BZOJ1090：[SCOI2003]字符串折叠——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=1090 Description 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.记作S=S 2 ...

  8. TCP的连接（三次握手）和释放（四次挥手）

    1 http都设置哪些header? http协议规定:一个完整的客户端发送给服务端的HTTP请求包括: (1)请求行:包括了请求方法.请求资源路径.HTTP协议版本,eg:GET/Server/im ...

  9. Codeforces 713C Sonya and Problem Wihtout a Legend DP

    C. Sonya and Problem Wihtout a Legend time limit per test 5 seconds memory limit per test 256 megaby ...

  10. CentOS查看系统版本号

    命令:cat /etc/redhat-release [elsearch@localhost data]$ cat /etc/redhat-release Red Hat Enterprise Lin ...