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

最新推荐文章于 2023-07-05 15:40:48 发布

sintina

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量886

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript 兼容性

本文链接：https://blog.youkuaiyun.com/WaterSprite_ct/article/details/78401153

javascript 同时被 2 个专栏收录

19 篇文章

订阅专栏

兼容性

2 篇文章

订阅专栏

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