clientX,pageX,screenX,offsetX,layerX,x的那些事

最新推荐文章于 2023-07-05 15:40:48 发布
最新推荐文章于 2023-07-05 15:40:48 发布
阅读量822 收藏
点赞数 1
分类专栏： javascript 兼容性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WaterSprite_ct/article/details/78401153
版权
clientX,pageX,screenX,offsetX,layerX,x的那些事
原生js: 
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>event</title>
	<style>
		body,div{
			padding: 0;
			margin: 0;
		}
		body{
			border: 100px solid #0f0;
			padding: 100px;
                }
                .father{
                        padding: 100px;
                        background: purple;
                        height: 1000px;
                        border: 100px solid #0ff;
                 }
                 .son{
                       width: 400px;
                       height: 200px;
                       background: yellow;
                  }
          </style>
 </head>
<body>
	<div id="Div" class="father">
		<div class="son"></div>
	</div>
 <script>
var DivObj = document.getElementById('Div');
DivObj.onmousemove = function(event) {
     var e = event || window.event;
     console.log(e);
}
</script>
</body>
</html>

控制台打印event对象：
chrome 浏览器
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  相对页面左上角的坐标(在浏览器打开的页面不出现滚动条，则pageX = clientX,pageY = clientY;若出现滚动条，则pageX ≠ clientX ，pageY ≠ clientY)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  相对可视区域的坐标（等同clientX/clientY）
layerX/layerY:  经测试layerX/layerY与pageX/pageY相同；
movementX/movementY:  经测试，该值为当前的pageX减去上一次的pageX的值(即pageX的坐标差)



Firefox浏览器
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  相对页面左上角的坐标(在浏览器打开的页面不出现滚动条，则pageX = clientX,pageY = clientY;若出现滚动条，则pageX ≠clientX ，pageY ≠ clientY)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY：(很多博客说firefox不支持offsetX)经测试，firefox浏览器支持offsetX;相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（等同clientX/clientY）
layerX/layerY: 经测试layerX/layerY与pageX/pageY相同；
movementX/movementY:  经测试，该值为当前的pageX减去上一次的pageX的值(即pageX的坐标差)

IE 11：
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  相对页面左上角的坐标(在浏览器打开的页面不出现滚动条，则pageX = clientX,pageY = clientY;若出现滚动条，则pageX ≠clientX ，pageY ≠ clientY)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（等同clientX/clientY）
layerX/layerY:  经测试layerX/layerY与clientX/clientY相同；(特殊)
movementX/movementY:  不支持（undefined）

IE 9：
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  相对页面左上角的坐标(在浏览器打开的页面不出现滚动条，则pageX = clientX,pageY = clientY;若出现滚动条，则pageX ≠clientX ，pageY ≠ clientY)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y: （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（等同clientX/clientY）
layerX/layerY:  经测试layerX/layerY与pageX/pageY相同；(特殊)
movementX/movementY:  不支持（undefined）

IE 8：
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  不支持(undefined)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（等同clientX/clientY）
layerX/layerY:  不支持(undefined)
movementX/movementY:  不支持（undefined）

IE 7：
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  不支持(undefined)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（等同clientX/clientY）
layerX/layerY:  不支持(undefined)
movementX/movementY:  不支持（undefined）

IE 6：
clientX/clientY:  相对可视区域的坐标(可视区域顾名思义就是肉眼可见的窗口)
pageX/pageY:  不支持(undefined)
screenX/screenY:  相对浏览器屏幕左上角的坐标（会随着浏览器窗口大小的缩放以及位置变化的影响）
offsetX/offsetY： 相对事件源元素border左上角的坐标【即：源元素border与padding的边界左上角为原点，border区域的offset将为负数】
x/y:  （有些博客说不支持，不过经测试，firefox浏览器支持）相对可视区域的坐标（如果body没有border,则等同clientX/clientY）[不算body的border]
layerX/layerY:  不支持(undefined)
movementX/movementY:  不支持（undefined）


(图片模糊的话可打开控制台，找到对应图片的img url点击右键， 点击[ open in new tab] 在新页面打开即可看到清晰的img)
总结：
1.由表中可知有四个属性基本浏览器都支持：clientX/clientY、offsetX/offsetY、screenX/screenY、x/y（IE浏览器中值存在差异）
2.IE浏览器都不支持movementX/movementY
3.IE9-都不支持pageX/pageY、layerX/layerY
4.x/y与clientX/clientY同值；但IE 7下 x/y = clientX/clientY-2;IE 6 下，x/y  = clientX/clientY - body的border
5.IE浏览器只有IE 11 支持layerX/layerY,但与Chrome、Firefox不一样

jQuery 1.7.2+
clientX/clientY: 相对可视区域的鼠标坐标值
pageX/pageY: 相对页面的坐标值
offsetX/offsetY:  相对源元素的坐标值
screenX/screenY:   相对设备屏幕的坐标值

注意：
1. IE8 pageX/pageY: 不包含body的border

sintina
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详细区分offsetX，clientX，pageX，screenX，layerX和X的区别
qq_39155611的博客
06-03 925
详细区分DOM事件中鼠标指针的坐标问题 前面博客中我们讲解到了DOM事件的event对象，里边包含了鼠标事件的指针坐标属性。比如event.offsetX,event.clientX,event.pageX,event.screenX等等。现在我们来解析一下这些坐标属性的区别。 HTML代码： <div class="box"></div> <div class="box2"></div> CSS代码： .box{ w
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 873
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
clientX、offsetX、layerX、screenX、pageX、x的区别
csdn_haow的博客
04-08 968
代码如下： <!Doctype> <html> <head> <title>HTML DOM Event 对象</title> <style> .div1 { position: relative; width: 100px; height: 100px; background: blac...
pageX,clientX,offsetX,layerX的那些事
hsany330的专栏
09-08 513
概念（来源于网络）： PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化。 clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条(即可视窗口)。  clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条(即可视窗口)。  offsetX
pageX-layerX-clientX-offsetX的区别
qyaroon的博客
04-13 939
PageX和clientX 这个两个比较容易搞混, PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器的可视窗口为参考点,随滑动条移动 而变化. IE中没有PageX，解决办法： PageY=clientY+scrollTop-clientTop; 页面上的位置
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
最新发布
qq_43631129的博客
07-05 7067
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
JavaScript中获取鼠标位置相关属性总结
10-25
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
javascript 事件对象 坐标事件说明
10-29
例如，`event.offsetX/Y`、`event.layerX/Y`、`event.x/y` 和 `event.pageX/pageY` 在某些情况下可能提供相同的信息，但它们在不同浏览器中的行为并不一致。在编写兼容性良好的 JavaScript 代码时，开发者通常需要...
Javascript中event对象的clientX，LayerX，offsetX, pageX
漫游学海之旅
02-11 2745
废话不多说，下面分别检测各个浏览器下的e.pageX e.layerX e.offsetX e.clientX e.screenX e.x 属性；测试浏览器：FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9测试代码：View Code 图示：测试结果如下：chrome：e.pageX——相对整个页面的坐标 e.layerX——相对当前选
JavaScript中鼠标event的位置(clientX,layerX,x,offsetX等)
星.云计算
03-20 236
JavaScript中的event对象一共有六对鼠标位置的属性。分别如下： 属性对 参考点 浏览器兼容性 clientX，clientY 浏览器窗口 所有 layerX，layerY 最近的绝对定位的父节点，如果没有，则为document Firefox，Chrome，Safari offsetX，offsetY 事件目标对象 所有，Firefox...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
麻瓜哇哇哇的博客
05-09 1530
简介 因为实际开发中，很少用到event对象的这几个值，每当写的时候又记不清，然后就要浪费时间去查找准确的资料，很是不爽，所以就做个记录~话不多说，直接上图（ps:图是网上找的，如果侵权，立马删除）： 针对offsetX, clientX, pageX, screenX，图上已经标的很明白了，就不做讲解了~ event.x event.x代表点击的点距离可视区左边框的距离，而它在不同浏览器处理结果是不一样的，首先看以下代码 <body> <div> 外
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
nioii-七仔
07-20 479
最近在尝试某验验证码JS逆向 其中 文字点选 验证码，看JS代码的时候，有如下概念：offsetX, clientX, pageX, screenX, layerX 鄙人，看到一位博友的文章，觉得很通俗易懂，所以也转载一下 通过 3 张图和 1 张表格，轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： <!DOCTYPE HTML> <html lang="zh-cn"
offsetLeft,Left,clientLeft的区别
xo_tobacoo
09-16 214
js开发富客户端必须要掌握的，本来打算自己总结下，不过baidu到这篇非常简单易懂:请参考图看   假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位...
一图轻解DOM的clientX layerX offsetX screntX区别
qq_41956361的博客
06-10 3050
pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性
VirgoYellow 的专栏
07-17 808
e.pageX——是鼠标指针的位置，相对于文档的左边缘，即相对整个页面的坐标（IE8及其以下的版本不支持该属性） $(selector).scrollLeft(position)——返回（无position）或设置（设置position）匹配元素的滚动条的水平位置 e.clientX——返回当事件被触发时鼠标指针向对于浏览器页面（或当前窗口）的水平坐标，即相对可视区域的坐标 e.offset
js中event对象的offsetX、 clientX、pageX、screenX、 layerX、x之间的区别
fengzhen8023
08-06 1272
我们在web前端项目中经常会使用到offsetX、 clientX、pageX、screenX、 layerX、x等变量，但是有的时候有搞不清楚他们之间的区别，甚至被搞得一头雾水。 这里给大家总结了一下他们之间的区别，而且使用图片给大家清晰的展示出来。 **图片是从其他大神那里字节拿过来用的，这是大神的原博客 [江波的博客](http://www.cnblogs.com/jiang...
鼠标事件以及clientX、offsetX、screenX、pageX、x的区别
weixin_40347345的博客
04-02 170
鼠标事件 鼠标事件有下面这几种： onclick 鼠标点击事件 box.onclick = function(e){ console.log(e) } 1 2 3 2. onmousedown 鼠标按下事件 box.onmousedown = function(e){ console.log(e) } 1 2 3 3. onmouseup 鼠标松开事件 box.onmouseup = func...
offsetx,clientx,pagex
03-17
offsetX，clientX 和 pageX 都是 JavaScript 中用于获取鼠标相对于文档的坐标的属性。 offsetX：是鼠标相对于当前元素的左边界的水平距离。 clientX：是鼠标相对于浏览器窗口的左边界的水平距离。 pageX：是鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值