clientX,pageX,x,screenX,offsetX等的区别

转载 2016年06月01日 20:21:46

先总结下区别:

event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离,以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。

event.pageX、event.pageY

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。pageX指鼠标在页面上的位置,以页面左侧为参考点

在页面没有滚动的情况下, pageX pageY 的值与 clientX clientY 的值相等。

event.offsetX、event.offsetY

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。screenX : 鼠标在屏幕中的位置,指的是鼠标到电脑屏幕左侧的距离。例如:当网页缩小,拖动到屏幕中间时,screnX 大于 clientX .

event.layerX ,event.layerY

FireFox特有,是相对于父元素的位置,鼠标相对于“触发事件的元素的层级关系中离该元素最近的,设置了positio的父元素”的边界的位置,从border的左上角开始定位,即如果这个父元素存在border,则坐标原点在border的左上角,而不是内容区域的左上角。

event.x,event.y

到可视区域的距离,FireFox不识别,有无滚动条相同,同clientX。



如图:




概念(来源于网络):

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。


分析:

1.  clientX 和x值在实验过程中,没有发现值不一样的例子,所以我认为它们在效果上是一样的。

2.  offsetX 是相对于当前窗口内,本触发事件对象(或者是某一区域)而言,如本例中你单击a区域,值是相对于a所在区域而言。

3. clientX ,x,offsetX共同点:它们是相对位置,相对于当前窗口,只是offsetX相对于当前窗口的某个触发对象的父容器而言。

4.  screenX是相对与客户端显示器而言,是绝对位置。





本文转自:http://blog.sina.com.cn/s/blog_8ccf0b170100yjm7.html

http://blog.sina.com.cn/s/blog_6967722d0100vdmn.html

http://www.2cto.com/kf/201409/333401.html

http://www.w3cfuns.com/notes/22527/7911591dd984abdd26d37084b7c8d974.html


相关文章推荐

pageX、clientX、screenX、offsetX、layerX、x 在不同浏览器上的使用及区别

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 ...
  • MOONCOM
  • MOONCOM
  • 2016年10月31日 16:18
  • 995

clientX,pageX,offsetX,layerX,screenX,offsetLeft区别分析

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容...

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

一张图轻松搞懂javascript event对象的 clientX,offsetX,screenX,pageX区别

pageX、clientX、screenX、offsetX、layerX、x

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 ...

比较offsetX, pageX,clientX,screenX的区别

之前一直没有把offset,page,client和screen这几个属性弄得很清楚,今天花了点时间算是大体上了解了这几个属性的区别,所以把我了解到的写出来,也算是做个总结。 首先我们来看看这几个属...

一图胜千言,秒懂巧记JavaScript中event对象的clientX,offsetX,screenX,pageX区别

区别: event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.p...

js事件对象Event获取pageX,clientX,screenX,offsetX,layerX的方式与区别

pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,同一个元素坐标不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,即是以浏览器滑动条此刻的滑动到的位置为参考点,同一个...

pageX, clientX, offsetX/layerX, screenX, scrollLeft()属性

e.pageX——是鼠标指针的位置,相对于文档的左边缘,即相对整个页面的坐标(IE8及其以下的版本不支持该属性) $(selector).scrollLeft(position)——返回(无posi...

理解e.clientX、e.clientY、e.pageX、e.pageY、e.offsetX、e.offsetY、e.screenX、e.screenY

e.clientX、e.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 e.pageX、e.pageY 类似于...

区分clientX、offsetX、pageX、screenX

以前一直以为写了这几个属性的区分的,今天再来看居然没有写。 不过这个还是很有用的。这里再来总结一下。所有解释都在图里面。这里再来文字解释一下,图中至标注了Y的值,X同理。clientX client...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clientX,pageX,x,screenX,offsetX等的区别
举报原因:
原因补充:

(最多只允许输入30个字)