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


javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, cli...
  • yang_chuanlong
  • yang_chuanlong
  • 2015年10月18日 23:52
  • 4895

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性, 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反...
  • u014205965
  • u014205965
  • 2015年05月09日 23:47
  • 3658

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

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

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

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下...
  • ruoyiqing
  • ruoyiqing
  • 2014年09月13日 16:37
  • 1219

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 2 张图和 1 张表格,轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属...
  • lzding
  • lzding
  • 2015年05月02日 09:42
  • 17503

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

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

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.scr...
  • binggoogle
  • binggoogle
  • 2015年08月06日 16:05
  • 821

JS:clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y

Event对象 Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 Event对象只在事件发生的过程中才有效。 浏览器兼容性 FF:没有win...
  • u010200222
  • u010200222
  • 2015年05月10日 17:38
  • 777

screenX clientX pageX offsetX

var x5 = e.screenX;   // 鼠标位置距屏幕左侧的距离 var y5 = e.screenY; var x = e.pageX;         // 鼠标距文档左侧的距离...
  • ywb201314
  • ywb201314
  • 2015年11月17日 22:04
  • 294

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

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容...
  • u013782203
  • u013782203
  • 2014年08月29日 15:16
  • 540
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:clientX,pageX,x,screenX,offsetX等的区别
举报原因:
原因补充:

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