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. [GDOI2014]拯救莫莉斯 状压DP

    题面: 莫莉斯·乔是圣域里一个叱咤风云的人物,他凭借着自身超强的经济头脑,牢牢控制了圣域的石油市场. 圣域的地图可以看成是一个n*m的矩阵.每个整数坐标点(x , y)表示一座城市( 1\le x\l ...

  2. POJ3469：Dual Core CPU——题解

    http://poj.org/problem?id=3469 题目大意: 两个CPU,处理每个任务有不同的代价,有些对任务如果不在同一个CPU就会增加代价,求最小代价. ——————————————— ...

  3. POJ1389：Area of Simple Polygons——扫描线线段树题解+全套代码注释

    http://poj.org/problem?id=1389 题面描述在二维xy平面中有N,1 <= N <= 1,000个矩形.矩形的四边是水平或垂直线段.矩形由左下角和右上角的点定义. ...

  4. POJ.3172 Scales (DFS)

    POJ.3172 Scales (DFS) 题意分析 一开始没看数据范围,上来直接01背包写的.RE后看数据范围吓死了.然后写了个2^1000的DFS,妥妥的T. 后来想到了预处理前缀和的方法.细节以 ...

  5. UVA.10066 The Twin Towers (DP LCS)

    UVA.10066 The Twin Towers (DP LCS) 题意分析 有2座塔,分别由不同长度的石块组成.现在要求移走一些石块,使得这2座塔的高度相同,求高度最大是多少. 问题的实质可以转化 ...

  6. bzoj1901: Zju2112 Dynamic Rankings(BIT套主席树)

    带修改的题主席树不记录前缀,只记录单点,用BIT统计前缀.  对于BIT上每一个点建一棵主席树,修改和询问的时候用BIT跑,在主席树上做就行了.  3k4人AC的题#256...应该不算慢 #incl ...

  7. [codeforces/gym/101350/L]维护“凸包”

    题目链接:http://codeforces.com/gym/101350/problems 给定n个墙,每个墙有一个高度,要支持动态修改墙的高度和查询这个“容器”能盛多少水. (队友)观察发现,能盛 ...

  8. 【题解】最大公约数之和 V3 51nod 1237 杜教筛

    题目传送门 http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1237 数学题真是做的又爽又痛苦,爽在于只要推出来公式基本上就 ...

  9. Foxmail安装和登录

    Foxmail安装和登录... ============================== 下载Foxmail客户端:http://www.foxmail.com/ ================ ...

  10. 线程阶段性总结——APM，ThreadPool，Task，TaskScheduler ，CancellationTokenSource

    不管我们使用thread,threadPool,task,还是APM异步,本质都是在使用多线程.对于新手来说,不太敢用多线程的原因,就我个人的体验来说,就是对多线程的异常捕获方式或时机缺乏了解,而一旦 ...