在js中offsetX,offsertY和pageX,pageY区别是什么

JavaScript015

在js中offsetX,offsertY和pageX,pageY区别是什么,第1张

1. 针对当前鼠标点击的点的位置到某部分的距离 2. clientX: 鼠标当前点击位置到窗口可视区域0的距离, screenX也是一样 X:鼠标当前点击位置到参考元素(父元素)边框距离, 如果是TD相对Table则有 左cellpadding + 左cellspacing + border + cellpading与cellspacing间隙(一竖线,1px) + 鼠标当前位置到左padding距离 OffsetX:鼠标当前点击位置到参考元素(父元素)padding处的距离(纯距离),什么都不包括,只有: 左padding距离 + 鼠标当前位置

一、clientX、clientY

点击位置距离当前body可视区域x,y坐标。

二、pageX、pageY

对于整个页面来说,包括被卷去的body部分的长度。

三、screenX、screenY

点击位置距离当前电脑屏幕的X、Y坐标。

四、offsetX、offsetY

相对于带有定位的父盒子的X、Y坐标。

五、X、Y

和screenX、Y一样。

以上五种是我们经常用到的坐标以及他们的含义。

下面附上一张图可以看得更清楚点。

吸使用以下几种方式获取:

1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE这个悲剧没有啊T_T,所以大牛们想出了一个办法

PageY=clientY+scrollTop-clientTop(只讨论Y轴,X轴同理,下同)

3.screenX/screenY:鼠标在屏幕上的位置,从屏幕左上角开始(w3c标准)

4.offsetX/offsetY:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值

5.

layerX/layerY:FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就幸福地生活在一起^-^,几乎相等,唯一不同就是一个从border为参考点,一个以内容为参考点

chrome和safari一条龙通杀!完全支持所有属性.其中(offsetX和layerX都是以border为参考点)

下面这个是获取相对于屏幕的坐标

document.onmousemove=function(e){e=e? e:window.eventdocument.writeln("X:"+e.screenX+"Y:"+e.screenY)}