javascript 事件对象 坐标事件说明
2020-02-28 04:12:27
供稿：网友
测试浏览器的版本:
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相等
