clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试

clientX,offsetX,pageX,screenX的异同

对于这个问题我相信有不少刚刚学习DOM事件的小伙伴可能会比较懵逼，首先我们从文字上解释它的异同

首先我们要明确对于浏览器而言，它的X还有Y左边是如何计算的：
X坐标是浏览器的可视窗口的左上角为坐标的原点，然后向右手边为X的正坐标，左手为负坐标。
同样的对于Y坐标而言就是以浏览器的可视窗口的左上角为坐标的原点，向下是Y的正坐标，向上是Y的负坐标。
不过对于浏览器的可视窗口而言，不存在所谓的负坐标，因为它的最小值就是(0,0)

一:clientX:
clientX是相对于浏览器窗口来计算的，不管你是否具有滚动条，可视窗口有多大，那么它的X值就是多大，例如你浏览器的宽度可以设置成4000PX，但是你的可视窗口只有100PX，那么你的clientX的最大值就是100PX

二：offsetX
offsetX是针对于被绑定事件的元素而言，它距被绑定元素的内边界是多大的横坐标，那么它的横坐标就是多大。例如你给一个div绑定了一个单击相应函数，当鼠标点击div盒子时吗，浏览器就会得到鼠标距离这个div盒子内边界有多大的距离那offsetX就是多少

三：pageX
pageX也是相对于浏览器的窗口来计算，它跟clientX的性质基本一致，但是最大的不同就是如果给浏览器的宽度设置成4000PX，那么通过pageX获得的最大X值也将是4000PX

四：screenX
screenX是相对于我们用户的显示器分辨率而言，例如显示器的分辨率为1920X1200 那么你的screenX 与 screenY的最大值就是1920px以及1200px

下面我以chrome浏览器作为测试的案例而言，并且我的显示器分辨率是1920 X 1200

当我们点击盒子时

我们能发现pageX与clientX的坐标是一样的，但是offsetX却比它们少8，这个是因为，我没有去除页面的padding值还有它的margin值，如果去除后，它们三者的值将一样(前提是，将被绑定事件的div盒子放在浏览器的左上角) 如果div盒子加上marin-left = 100px时，如果仍然点击div盒子同一点击点，那么X的offset的坐标仍然是91 但是offsetX与clientX就是 99+100-8 而screenX就是194+100(对于screenX而言，浏览器有无padding值还有margin值都不影响它，因为它以我们的显示器分辨率为参考点)

剩余没有展示的部分，感兴趣的朋友可以根据我上面的文字部分进行演示，如果有任何说错的地方或者需要补充的都欢迎各位指出我的错误并且进行补充，谢谢。