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. Redis 学习之主从复制

    该文使用centos6.5 64位    redis3.2.8 主从复制 Redis的复制功能是支持多个数据库之间的数据同步.一类是主数据库(master)一类是从数据库(slave),主数据库可以进 ...

  2. 小程序出现 “2 not found” 解决方案

    今天新建小程序的时候出现 ,控制台出现“2 not found” 报错. 解决方法: 在控制台输入  openVendor()  , 然后会弹出开发工具的文件夹,删除掉下图这两个程序,重启开发工具就可 ...

  3. P1955 [NOI2015]程序自动分析

    题目描述 在实现程序自动分析的过程中,常常需要判定一些约束条件是否能被同时满足. 考虑一个约束满足问题的简化版本:假设x1,x2,x3...代表程序中出现的变量,给定n个形如xi=xj或xi≠xj的变 ...

  4. [AT2164] [agc006_c] Rabbit Exercise

    题目链接 AtCoder:https://agc006.contest.atcoder.jp/tasks/agc006_c 洛谷:https://www.luogu.org/problemnew/sh ...

  5. bzoj 2140: 稳定婚姻 （二分图）

    //========================== 蒟蒻Macaulish:http://www.cnblogs.com/Macaulish/  转载要声明! //=============== ...

  6. HDU2089：不要62——题解

    http://acm.hdu.edu.cn/showproblem.php?pid=2089 Problem Description 杭州人称那些傻乎乎粘嗒嗒的人为62(音:laoer). 杭州交通管 ...

  7. BZOJ3495 PA2010 Riddle 【2-sat】

    题目链接 BZOJ3495 题解 每个城市都有选和不选两种情况,很容易考虑到2-sat 边的限制就很好设置了,主要是每个郡只有一个首都的限制 我们不可能两两之间连边,这样复杂度就爆炸了 于是乎就有了一 ...

  8. bzoj1045: [HAOI2008] 糖果传递（思维题）

    首先每个人一定分到的糖果都是所有糖果的平均数ave. 设第i个人给i-1个人Xi个糖果,则有Ai-Xi+X(i+1)=ave. 则A1-X1+X2=ave,A2-X2+X3=ave,A3-X3+X4= ...

  9. Linux之poll与select20160619

    使用非阻塞I/O的应用程序通常会使用select()和poll()系统调用查询是否可对设备进行无阻塞的访问,这两个系统调用最终又会引发设备驱动中的poll()函数被执行 如果当前不可读(先调用驱动.p ...

  10. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...