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. linux下清空文件全部内容，如log日志

    在实际操作中经常需要清空log文件, 比如a.log,   有的人说, 直接删除不就行了, 但是, 直接删除后, 没法使用tail -f a.log了. 有的人说, 先rm再touch一个新文件不就可 ...

  2. iOS-UI控件概述

    IBAction和IBOutlet,UIView 1 @interface ViewController : UIViewController 2 3 @property(nonatomic, wea ...

  3. openstack中间件message queue 与memcached环境部署

    为什么要安装中间件 组件间的通信使用的是REST API 而组件内部之间的通信则是使用的中间件 首先登陆openstack的官网查看官方文档 www.openstack.org 应为在部署一个架构之前 ...

  4. BZOJ4835 遗忘之树

    点分树上的某个点和其某个子树在原树中的连接方式一般来说可以是由该点连向子树内任意一点,这样方案数即为所有子树大小之积.但有一种特殊情况是连接某点后导致编号最小的重心更换,只要去掉这种就行了,具体地可以 ...

  5. linux 服务器丢包故障排查

    项目开了个P2P服务器,但是运行一段时间就会出现丢包问题,具体表现为:1.udp丢包严重(一分钟收发分别1.5W) 2.ssh(用于运维指令)连接不上该服务器(超时) 3.服务器运行好像没什么异常,u ...

  6. （一）Redis简介及安装

    Redis简介 Redis 是一个开源(BSD许可)的,内存中的key-value数据结构存储系统,它可以用作数据库.缓存和消息中间件. Redis具有丰富的数据结构类型.包括字符串(string), ...

  7. BZOJ2795/2890/3647 [Poi2012]A Horrible Poem 【字符串hash】

    题目链接 BZOJ2795 BZOJ2890 BZOJ3647 题解 三倍经验! 我们要快速求区间最小循环节 我们知道循环节有如下性质: ①当\(L\)为循环节长度,那么\(s[l...r - L] ...

  8. HDU.1285 确定比赛名次 (拓扑排序 TopSort)

    HDU.1285 确定比赛名次 (拓扑排序 TopSort) 题意分析 裸的拓扑排序 详解请移步 算法学习 拓扑排序(TopSort) 只不过这道的额外要求是,输出字典序最小的那组解.那么解决方案就是 ...

  9. ACE线程管理机制-面向对象的线程类ACE_Task

    转载于:http://www.cnblogs.com/TianFang/archive/2006/12/05/583231.html 我们在前一章中使用ACE_Thread包装时,你一定已经注意到了一 ...

  10. group by多字段分组

    在平时的开发任务中我们经常会用到MYSQL的GROUP BY分组, 用来获取数据表中以分组字段为依据的统计数据.比如有一个学生选课表,表结构如下: Table: Subject_Selection S ...