本文主要是介绍获取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
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与FF中鼠标坐标的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!