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. QT分析之网络编程

    原文地址:http://blog.163.com/net_worm/blog/static/127702419201002842553382/ 首先对Windows下的网络编程总结一下: 如果是服务器 ...

  2. css3 字体渐变

    先看个效果 https://www.bienvillecapital.com/ 然后人家样式这样写的 font-family: Overpass,Helvetica,sans-serif; font- ...

  3. springBoot @Enable*注解的工作原理

    使用注解实现异步 RunnableDemo类 package com.boot.enable.bootenable; import org.springframework.scheduling.ann ...

  4. Foundation框架—时间处理对象NSDate

    NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. NSDate的构造方法和构造获取实例的属性 用于创建NSDat ...

  5. Django Models相关

    Models的相关知识 1. AutoField:自增整数类型.根据 ID 自增长的 Int字段 2. IntegerField:整数类型 3. BigIntegerField:大整数类型.用于数值较 ...

  6. 【hackerrank】Week of Code 26

    在jxzz上发现的一个做题网站,每周都有训练题,题目质量……前三题比较水,后面好神啊,而且类型差不多,这周似乎是计数专题…… Army Game 然后给出n*m,问需要多少个小红点能全部占领 解法:乘 ...

  7. Codeforces Round #469 (Div. 2) F. Curfew

    贪心 题目大意,有2个宿管分别从1和n开始检查房间,记录人数不为n的房间个数,然后锁住房间. 没有被锁的房间中的学生可以选择藏在床底,留在原地,或者转移(最远转移d个房间)   然后抄了网上大神的代码 ...

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

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

  9. BZOJ2301：[HAOI2011]Problem b——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2301 https://www.luogu.org/problemnew/show/P2522 对于给 ...

  10. nxlog以syslog方式发送日志

    1.nxlog简介 nxlog是个跨平台日志传输插件,支持linux.windows平台,支持window及linux内置的大部分系统日志及常见的web日志,支持tcp.udp.http(s)等协议传 ...