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

事件对象event的位置属性，这些参数比较容易混淆

1. pageX,pageY ：IE不识别的，鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化，其实就是clientY+scrollTop，参考点是页面

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

　　　　　　　　　览器左上角为参考点

3. screenX, screenY : 鼠标相对于屏幕的位置，跟浏览器没有关系，不管浏览器多大，是以计算机屏幕为参考点的

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

5. layerX,layerY : IE不识别的，如果event元素没有相对定位和绝对定位的话，相当于pageX,pageY,如果有定位属性的话，相当于border+offsetX,

6. x,y： FF不识别的，IE是相等于offsetX，chrome相等于clientX

时间： 2024-11-08 20:36:36

pageX, clientX ,screenX, offsetX, layerX, ,x的区别的相关文章

比较screenX,pageX,clientX和offsetX

event.offsetY表示用户指针到盒子的顶端距离. event.clientY表示用户指针到视口顶端的距离. event.screenY表示用户指针到屏幕顶端的距离 event.pageY 表示用户指针到页面顶端的距离 window.scrollTop();鼠标滚轮卷动值表示范围: screenY>pageY>clientY>offsetY 当页面没有滚动时,pageY == clientY

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移.但在不同的浏览器中其值又有所不同.在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值.如下图(一个具有蓝色边框的div)所示. layerX

【clientX，offsetX，screenX】【scrollWidth，clientWidth，offsetWidth】的区别

一.深刻认识clientX,offsetX,screenX 概念(来源于网络): clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用

深刻认识clientX，offsetX，screenX

clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientX ,clientY 相对的对象是浏览器窗口,不管浏览器如何变化,其(0,0)坐标永远在浏览器当前窗口的左上角 ==============================================================================

pageX,clientX,offsetX,layerX的区别

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域

clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

Chrome下(测试版本为51.0.2704.106 ): 由上图可见题目中的6种属性可分为三大类: 1.鼠标指针相对于屏幕的坐标:screenX/Y 2.相对于页面且不考虑滚动条是否滚动:clientX/Y,X/Y 3.相对于页面且考虑滚动条:pageX/Y,layerX/Y,offsetX/Y 下面着重讨论2,3. 红色对应上文的2类.div3设置了50px的border,可以看到offsetX的数值未包含左边框的50px.下面看一个行内块的: 可见offsetX/Y为鼠标指针相对于当前元素

jQuery中 pageX,clientX,offsetX,layerX的区别

一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0)坐标绝对定位clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.可以理解为:相对可视化左上角坐标绝对定位如图:(小黑点为点击坐标) 二.screenXscreenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个

pagex，screenx，clientx的区别

JavaScript event对象clientX，offsetX，screenX异同

event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动.鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的理解一下. 概念(不是官方,来源于网络): clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠