pageX,clientX区别

pageX/pageY:
鼠标相对于整个页面的X/Y坐标。
注意,整个页面的意思就是你整个网页的全部,比如说网页很宽很长,宽2000px,高3000px,那pageX,pageY的最大值就是它们了。
特别说明:IE不支持!

//-----------------------------------------------------------

clientX/clientY:
事件发生时鼠标在浏览器内容区域的X/Y坐标(不包含滚动条)。
浏览器内容区域即浏览器窗口中用来显示网页的可视区域,注意这个可视,也就是说需要拖动滚动条才能看到的区域不算。
当你将浏览器窗口缩小时,clientX/clientY的最大值也会缩小,但始终,它们的最大值不会超过你浏览器可视区域。
特别说明:IE下此属性不规范,它们的最小值不是0而是2,也就是说IE下的clientX/clientY比火狐下始终大2px。

时间: 2024-12-07 15:38:06

pageX,clientX区别的相关文章

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

pageX,clientX,offsetX,layerX的区别

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

js event对象的clientX,offsetX,screenX和pageX的区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非

screenX clientX pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) ' 缩小浏览器窗口就能看出很明显的差别 示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

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

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

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

事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY+scrollTop,参考点是页面 2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的,是以浏  览器左上角为参考点 3. screenX, screenY : 鼠标相对

比较screenX,pageX,clientX和offsetX

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

event对象中offsetX,clientX,pageX,screenX的区别

1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3.pageX事件对象相对于整个文档的坐标以像素为单位.4.screenX事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变. 以上除了screenX/Y以设备像素为单位,其他都是以css像素为单位下面以一个实例来解释说明 <!

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为鼠标指针相对于当前元素