JavaScript event对象clientX,offsetX,screenX异同 带图 .

简介: 转自:http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html   event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动、鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的理解一下。

转自:http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html

  event对象是JavaScript中最重要的对象之一,他代表了各种事件的状态,在各种事件的事件处理中经常用到,比如键盘活动、鼠标活动等等,其中有几个对象官方说的比较模糊,很难理解,这里有必要通俗化的理解一下。

     概念(不是官方,来源于网络):

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

     具体分析实验点这里。已经分析的很清楚了,这是目前网上讲的比较透彻的博文。为了理解这个状态,我做了一个效果图,希望能帮助理解、加深记忆。

     说明,这是上面那个博文里面的运行图,事件为单击图中触发点。直线代表各种值的计算范围。
QQ截图

目录
相关文章
|
23天前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
34 4
|
21天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
27 1
|
22天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
14 2
|
24天前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
18 2
|
28天前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
15 3
|
1月前
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
20 2
|
17天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
11 0
|
21天前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
15 0
|
29天前
|
前端开发 JavaScript 开发者
深入理解JavaScript中的对象与类
深入理解JavaScript中的对象与类
13 0
|
29天前
|
JavaScript 前端开发
如何在JS中声明一个对象
如何在JS中声明一个对象
17 0