JavaScript event对象clientX,offsetX,screenX异同

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

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

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

补充:

pageX,pageY

顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度

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

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

原文:http://www.cnblogs.com/long_/archive/2010/09/09/1822574.html

时间: 2024-08-24 05:51:21

JavaScript event对象clientX,offsetX,screenX异同的相关文章

【转】一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

转自:http://www.2cto.com/kf/201409/333401.html 总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY

轻松搞懂javascript 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,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE

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,但它们使用的是文档坐标而非

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

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

09.04 javaScript Event 对象 时间的冒泡和捕获 节点 从HTML中通过id name 标签名 class 选择器 获取元素

# Event对象 ### Event种类 * mouseEvent * keyboardEvent * focusEvent ### 属性 * clientX * clientY * keyCode * target    具体触发事件的元素 appendChild() 方法向节点添加最后一个子节点. ### 方法 * stopPropagation()   阻止冒泡 * preventDefault()      阻止默认动作 ### 事件的冒泡和捕获 # 节点 ### 节点分类 * doc

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle

event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle

event对象的clientX,offsetX,screenX,pageX

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera: e.pageX——相对整个页面的

clientX,offsetX,screenX,pageX 区别!

先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcEle