加载中…获取IE与FF中鼠标坐标
(2011-03-29 17:25:10)
标签：
javascript鼠标坐标ie/ff兼容layerxpagexclientxoffsetxscreenxit |
分类： Javascript |
今天还是相对的空闲，继续看javascript，发现IE与FF获取鼠标坐标有很大不同，搜罗了些文章，写下总结。
据资料显示，IE中获取鼠标坐标的事件属性有以下几个：
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
( 经过测试，发现x跟clientX, y跟clientY一致 )
据资料显示，FF中获取鼠标坐标的事件属性有以下几个：
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
pageX / layerX
设置或获取鼠标指针位置相对于父文档的 x
像素坐标。
pageY / layerY
（ 经过测试，发现page跟layer就像相对定位与<body>一样，等于client+滑动距离 ）
自己写了个小js测试下，点击红色区域的时候，获取对应坐标填写到对应的input中，下面是截图：
这个是IE8的截图，红色的点数鼠标点击的大概位置，黑色的线条表示client的坐标距离，绿色的表示offset，橙色表示screen.
这个是FF的截图，红色的点数鼠标点击的大概位置，黑色的线条表示client的坐标距离，粉色的表示page/layer，橙色表示screen.
这样看感觉page/layer跟client一样，所以我做多一张图：
当滑动条滑动时，元素上升，点击时候，client会根据窗口来定，但是page/layer却依然相对于<body>就像图里面画的一样，它的坐标等于client+滑动距离。
据资料显示，IE中获取鼠标坐标的事件属性有以下几个：
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。
( 经过测试，发现x跟clientX, y跟clientY一致 )
据资料显示，FF中获取鼠标坐标的事件属性有以下几个：
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
pageX / layerX
pageY / layerY
（ 经过测试，发现page跟layer就像相对定位与<body>一样，等于client+滑动距离 ）
自己写了个小js测试下，点击红色区域的时候，获取对应坐标填写到对应的input中，下面是截图：
这个是IE8的截图，红色的点数鼠标点击的大概位置，黑色的线条表示client的坐标距离，绿色的表示offset，橙色表示screen.
这个是FF的截图，红色的点数鼠标点击的大概位置，黑色的线条表示client的坐标距离，粉色的表示page/layer，橙色表示screen.
这样看感觉page/layer跟client一样，所以我做多一张图：
当滑动条滑动时，元素上升，点击时候，client会根据窗口来定，但是page/layer却依然相对于<body>就像图里面画的一样，它的坐标等于client+滑动距离。
喜欢
0
赠金笔