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值都不影响它，因为它以我们的显示器分辨率为参考点)

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

clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试相关推荐

【鼠标事件 MouseEvent】clientX clientY offsetX offsetX pageX screenX screenY
鼠标事件 MouseEvent 对象,下clientX clientY offsetX offsetX pageX screenX screenY 定义转自 MDNMouseEvent MouseEv ...
chrome浏览器测试插件postman安装
1. 我们可以参照http://jingyan.baidu.com/album/a17d528513abe28099c8f274.html?picindex=1按步骤进行插件安装操作. 如果chrom ...
html5 offsetx,event对象中offsetX,clientX,pageX,screenX的区别
1.offsetX offset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border. 2.clientX 事件对象相对于浏览器窗口可视区域的X ...
区分event对象中的[clientX,offsetX,screenX,pageX]
前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientX eve ...
图解事件坐标screenX、clientX、pageX, offsetX的区别
一.图解如图所示,假设页面中灰色圆点是鼠标点击处,黄色区域是鼠标触发事件对象二.概念 1.screenX 和screenY 参照点:电脑屏幕左上角 screenX:鼠标点击位置相对于电脑屏幕左上角 ...
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:鼠标相对于浏览器窗口可视区域 ...
详细区分offsetX，clientX，pageX，screenX，layerX和X的区别
详细区分DOM事件中鼠标指针的坐标问题前面博客中我们讲解到了DOM事件的event对象,里边包含了鼠标事件的指针坐标属性.比如event.offsetX,event.clientX,event.pa ...
Js event对象offsetX, clientX, pageX, screenX, layerX, x区别（图解）
简介因为实际开发中,很少用到event对象的这几个值,每当写的时候又记不清,然后就要浪费时间去查找准确的资料,很是不爽,所以就做个记录~话不多说,直接上图(ps:图是网上找的,如果侵权,可立马删除) ...

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

clientX,offsetX,pageX,screenX的异同

clientX,offsetX,pageX,screenX的异同以Chrome浏览器测试相关推荐

最新文章

热门文章