首页 > 语言 > JavaScript > 正文

javascript 事件对象 坐标事件说明

2024-05-06 12:37:07
字体:
来源:转载
供稿:网友
测试浏览器的版本:

IETester 6 ,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0


先来看看各个主流浏览器都有哪些坐标属性以及它们的意义

在IE中

event.offsetX
event.offsetY
相对于e.srcElement坐标
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。


event.clientX
event.clientY
总是相对于视口
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。


event.x
event.y
虽然手册上说是相对于文档,但是ie6/7 中,他们俩的值跟clientX,clientY一致
但是这并不是严重的问题,因为视口相对坐标加上滚动条已卷去高度,依然可以得到真实的x(y),这个问题在ie8的标准模式下被解决

设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

event.screenX
event.screenY
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
设置或获取获取鼠标指针位置相对于用户屏幕的 y 坐标。

在FireFox中

event.layerX
event.layerY
相对于e.srcElement坐标
设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。

event.clientX
event.clientY
总是相对于视口
设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条。
设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条。


event.pageX
event.pageY
设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
设置或获取鼠标指针位置相对于父文档的 y 像素坐标。


event.screenX
event.screenY
设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
设置或获取获取鼠标指针位置相对于用户屏幕的 y 坐标。


实际上IE和Firefox已经囊括了所有的属性,其他的浏览器将这些属性进行了组合,但是意义完全一致

Chrome 和 Safari
Chrome和Safari这哥俩办事儿则灰常周全,它们收录了所有的坐标属性,包括

event.offsetX
event.offsetY
event.layerX
event.layerY

event.clientX
event.clientY

event.x
event.y
event.pageX
event.pageY

注意:Chrome和Safari的event.x event.y 跟IE6 7 的表现一致,它们和event.clientX,event.clientY相等
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选