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

gityuan 发布于2019-08-22 16:01 / 537人阅读

摘要：意为偏移量是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。

1、offsetX
offset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。
2、clientX
事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条
3、pageX
事件对象相对于整个文档的坐标以像素为单位.
4、screenX
事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变.

以上除了screenX/Y以设备像素为单位，其他都是以css像素为单位
下面以一个实例来解释说明




    
    Title

当没有滚动条的时候,pageX==clientX,offsetX=pageX+(margin-left)+border

当有滚动条的时候,pageX!=clientX

GPU云服务器云服务器火狐获取event对象 jsp中event js数据对象和对象的区别吗对象存储和cdn的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93961.html

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

摘要：意为偏移量是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。 1、offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。2、clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3、pageX事件对象相对于整个文档的坐标以像素为单位...

JasinYip 2019-08-30 14:22 评论0 收藏0
event对象中offsetX,clientX,pageX,screenX的区别

摘要：意为偏移量是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。 1、offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离。以元素盒子模型的内容区域的左上角为参考点。不包括border。2、clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3、pageX事件对象相对于整个文档的坐标以像素为单位...

wujl596 2019-08-02 10:06 评论0 收藏0
鼠标点击的各种坐标 (事件对象)

摘要：返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条，事件和标准事件都定义了这个属性返回鼠标指针的位置，类似于，但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平（垂直）窗口坐标。可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2...

xushaojieaaa 2019-08-23 14:51 评论0 收藏0
鼠标点击的各种坐标 (事件对象)

摘要：返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平垂直窗口坐标。可视区域不包括工具栏和滚动条，事件和标准事件都定义了这个属性返回鼠标指针的位置，类似于，但它们使用的是文档坐标而非窗口坐标。是相对于被点击了的元素。 e.clientX,e.clientY返回事件发生时，鼠标指针相对于浏览器窗口可视区域的水平（垂直）窗口坐标。可视区域不包括工具栏和滚动条，IE事件和标准事件都定义了这2...

xiongzenghui 2019-08-02 14:09 评论0 收藏0