小虎博客

A-A+

JavaScript取得鼠标绝对位置程序代码

2016年01月21日 编程技术 暂无评论

文章介绍了关于JavaScript在不同浏览器下取得鼠标绝对位置相关函数用法及兼容性介绍，有的同学可参考一下。

首先不同浏览器中event位置属性的分析:

1.IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离)

2.Firefox的event.pageX,event.pageY是以body元素为参考点(包括滚动距离)

3.event.clientX,event.clientY以浏览器左上角为参考点(不包括滚动距离)

4.IE的event.offsetX,event.offsetY和Firefox的event.layerX,event.layerY以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)

然后是DOM对象高度属性分析

1.scrollHeight: 获取对象的滚动高度

2.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

3.scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

4.scrollWidth:获取对象的滚动宽度

5.offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

6.offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

7.offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

有了以上分析,写出两个取位置的函数,代码如下:

  1. // 取X轴位置  
  2. function mouseX(evt) {  
  3.     // firefox  
  4.     if (evt.pageX) return evt.pageX;  
  5.     // IE  
  6.     else if (evt.clientX)  
  7.         return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);  
  8.     else return null;  
  9. }  
  10. // 取Y轴位置  
  11. function mouseY(evt) {  
  12.     // firefox  
  13.     if (evt.pageY) return evt.pageY;  
  14.     // IE  
  15.     else if (evt.clientY)  
  16.         return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);  
  17.     else return null;  
  18. }  

获取Html控件的绝对位置的两种方法,代码如下:

  1. function getAbsPoint(e){  
  2.     var x = e.offsetLeft, y = e.offsetTop;  
  3.     while (e = e.offsetParent) {  
  4.         x += e.offsetLeft;  
  5.         y += e.offsetTop;  
  6.     }  
  7.     alert("x:" + x + "," + "y:" + y);  
  8. }  
  9. function getAbsPoint(obj){  
  10.     var x, y;  
  11.     oRect = obj.getBoundingClientRect();  
  12.     x = oRect.left  
  13.     y = oRect.top  
  14.     alert("(" + x + "," + y + ")")  
  15. }  

注意:document.body.scrollLeft，document.body.scrollTop只用于IE6以前的版本，在IE6中，对没有宣告 DOCTYPE,或者宣告的是transitional DOCTYPE，那么IE6将使用document.documentElement.scrollLeft 来获取鼠标的绝对位置.

标签：

给我留言