鼠标位置的获取pageX,pageY,screenX,screenY,clientX,和clientY,offsetX ,offsetY,layerX,layerY的使用 和 区别

pageX,pageY,screenX,screenY,clientX,和clientY返回一个数,其指示物理“CSS像素”的数量的点是从参考点。事件点是用户单击的位置,参考点是左上角的一个点。这些属性返回该参考点的水平和垂直距离。

1、pageX和pageY:
	相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置,
	并且如果在页面中嵌入了嵌入的可滚动页面并且用户移动滚动条,则实际上可以改变位置。

2、screenX和screenY:
相对于物理屏幕/监视器的左上角,只有增加或减少监视器数量或监视器分辨率时,此参考点才会移动。

3、clientX和clientY:
相对于浏览器窗口的内容区域(视口)的左上边缘。即使用户从浏览器中移动滚动条,此点也不会移动。
属性 说明
clientX 以浏览器左上顶角为原点,定位 x 轴坐标
clientY 以浏览器左上顶角为原点,定位y轴坐标
offsetX 以当前事件的目标对象左上角为原点,定位x轴坐标
offsetY 以当前事件的目标对象左上角为原点,定位y轴坐标
pageX 以Document 对象(即文本窗口)左上角为原点,定位x轴坐标
pageY 以Document 对象(即文本窗口)左上角为原点,定位y轴坐标
screenX 计算机屏幕左上角为原点,定位x轴坐标
screenY 计算机屏幕左上角为原点,定位y轴坐标
layerX 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位x轴坐标
layerY 最近的绝对定位的父元素(如果没有,则为Document对象)左上角为原点,定位y轴坐标
全部评论

相关推荐

评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务