event对象中offsetX,clientX,pageX,screenX的区别-白红宇

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

阅读量：6165 次

发布时间：2019-06-21

本文共 365 字，大约阅读时间需要 1 分钟。

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

转载地址：http://ghuba.baihongyu.com/

你可能感兴趣的文章

Response. AppendHeader使用大全及文件下载.net函数使用注意点（转载）

查看>>

centos64i386下apache 403没有权限访问。

查看>>

jquery用法大全

查看>>

PC-BSD 9.2 发布，基于 FreeBSD 9.2

查看>>

css斜线

查看>>

Windows phone 8 学习笔记(3) 通信

查看>>

Revit API找到风管穿过的墙(当前文档和链接文档)

查看>>

Scroll Depth – 衡量页面滚动的 Google 分析插件

查看>>

Windows 8.1 应用再出发 - 视图状态的更新

查看>>

自己制作交叉编译工具链

查看>>

Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全

查看>>

[物理学与PDEs]第3章习题1 只有一个非零分量的磁场

查看>>

onInterceptTouchEvent和onTouchEvent调用时序