背景

最近在做一款基于canvas的画板插件，开发过程中的画笔功能就会使用很多关于鼠标位置的属性：screenX/Y，clientX/Y，pageX/Y，offsetX/Y，以及节点offsetLeft和offsetTop。
之前在做到过类似的工具(很简单)，但都是看了下鼠标位置信息的api看到那个用那个没有去深思它们之间的区别，这次在遇见坑花了点时间整理强化下自己的记忆。

要理解它们之间的差异需要正确的认识参照物。

screenX/Y

正如名字一样它的参照物是电脑的屏幕。如图所示，把浏览器缩小后拖到某个位置，绿色为鼠标点击位置，该点的screenX和Y分别为434和945，说明screen属性会受到浏览器窗口位置影响。它表示的是当前点位在屏幕的位置。

clientX/Y

clientX/Y属性的参数物则是浏览器的可视区域。如图所示，浏览器窗口位置跟上面一直。但黑点clientX/Y属性的值为322和800，说明client属性不会受到浏览器窗口位置的影响。它表示当前点在浏览器窗口可视区(可视区 = 浏览器窗口 – 导航栏 --工具栏 – 书签栏 – 地址栏)的位置。

pageX/Y

pageX/Y属性的参数物也是浏览器的可视区域。但是和clientX/Y不同的是它还会加上可视区滚动的scrollX/Y。

offsetX/Y

offsetX/Y属性的参数物是设置事件的目标元素(用代码来说就是event.taeget)。举个例子，一个父元素高宽都为500px且overflow为scroll；子元素高宽都是1000px(背景为红色)。我们为子元素设置一个点击事件。如图所示：黑点的offsetX为（X1+X2） Y为（Y1+Y2）;这里有一个误区容易忘记y2和x2的长度。要记住参照物为目标元素在本例中就是子元素，而资源的实际宽高为(YA+红色区域+YB)，宽度同理。

接下来是对offsetLeft的理解

要理解offsetLeft和offsetTop则需要知道offsetParent。因为offsetLeft表示前元素左上角相对于offsetParent节点的左边界偏移的像素值。
当前元素的offsetParent是包含当前元素的定位元素(这句话我个人理解就是在祖先元素中第一个position属性值部位static的元素) 或者最近的 table,td,th,body元素。当前元素的 style.display 设置为 “none” 时/或者position设置为“fixed”时，offsetParent 返回 null。

我还发现了一个点如果你使用过translate来移动位置，尽管和offsetParent的左上角有偏移像素但是offsetLeft/offsetTop也为0。具体原因还未知，如果有知道的朋友希望告知:)

offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.相关推荐

screenX clientX pageX的区别
screenX clientX pageX概念 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟scree ...
screenX,clientX,pageX,offsetX,的区别
2019独角兽企业重金招聘Python工程师标准>>> event.screenX.event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标.标准事件和IE事件都定义了 ...
事件坐标：screenX,clientX,pageX,offsetX的区别
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标.e.screenX,e.screenY的最大值不会超过屏幕分辨率. e.clientX/e.clientY: 事件发生时鼠 ...
理解screenX clientX pageX概念
先了解screenX,clientX,pageX概念 screenX: 鼠标位置相对于用户屏幕水平偏移量,而screenY就是垂直方向的,此时的参照点也就是原点是屏幕的左上角.clientX: 跟sc ...
clientX、offsetX、screenX、pageX的区别
一.概念总结 1.event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性.cl ...
clientX、pageX、screenX以及offsetX区别
clientX.pageX.clientX以及offsetX区别 client系列(不包含滚动条) clientX:鼠标相对于浏览器窗口可视区域x方向坐标 clientY:鼠标相对于浏览器窗口可视区域 ...
研究MouseEvent中的clientX、offsetX、pageX、screenX
很多时候需要在鼠标点击的时候获取点击的坐标来处理一些逻辑,有时候clientX.offsetX.pageX用的也不清楚,特此做了一个实验来记录. 1.含义 clientX 提供应用程序客户区域内发生事 ...
【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
clientX,screenX,pageX,offsetX的区别
前言关于clientX,screenX,pageX,offsetX的区别之前也比较迷糊,然后自己写了几个demo算是弄明白了,在这记录一下. 定义一.clientX.clientY 点击位置距离当 ...

offsetLeft理解以及MouseEvent接口中的screenX,clientX,pageX,offsetX区别.

背景