夏日博客

A-A+

JavaScript event取得鼠标绝对位置

2016年02月21日 前端设计 暂无评论 阅读 8 views 次

本文章来给大家详细介绍JavaScript event取得鼠标绝对位置代码,有需要学习的朋友可参考参考,代码如下:

  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. }  
  19.   
  20. //例,代码如下:  
  21. function CPos(x, y)  
  22. {  
  23.     this.x = x;  
  24.     this.y = y;  
  25. }  
  26. //获取控件的位置  
  27. function GetObjPos(ATarget)  
  28. {  
  29.     var target = ATarget;  
  30.     var pos = new CPos(target.offsetLeft, target.offsetTop);  
  31.       
  32.     var target = target.offsetParent;  
  33.     while (target)  
  34.     {  
  35.         pos.x += target.offsetLeft;  
  36.         pos.y += target.offsetTop;  
  37.           
  38.         target = target.offsetParent  
  39.     }  
  40.       
  41.     return pos;  
  42. }  
  43.   
  44. //测试,代码如下:  
  45. var pos = GetObjPos($id("t1"));  
  46. $id("div2").style.left = pos.x + "px";//"10px";  
  47. //$id("div2").style.top = pos.y * 1px;  
  48. $id("div2").style.top = pos.y + "px";  
  49.   
  50. //实例,代码如下:  
  51. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  52. <html>  
  53. <head>  
  54. <title> New Document </title>  
  55. <meta name="Generator" content="EditPlus">  
  56. <meta name="Author" content="">  
  57. <meta name="Keywords" content="">  
  58. <meta name="Description" content="">  
  59. </head>  
  60. <body onmouseMove="getXY(event)">  
  61. <script language="JavaScript">  
  62. <!--  
  63. function mouseX(evt) {  
  64. if (evt.pageX) return evt.pageX;  
  65. else if (evt.clientX)  
  66.    return evt.clientX + (document.documentElement.scrollLeft ?  
  67.    document.documentElement.scrollLeft :  
  68.    document.body.scrollLeft);  
  69. else return null;  
  70. }  
  71. function mouseY(evt) {  
  72. if (evt.pageY) return evt.pageY;  
  73. else if (evt.clientY)  
  74.    return evt.clientY + (document.documentElement.scrollTop ?  
  75.    document.documentElement.scrollTop :  
  76.    document.body.scrollTop);  
  77. else return null;  
  78. }  
  79. function getXY(event)  
  80. {  
  81.     var e = event || window.event;  
  82.     var x = mouseX(e);  
  83.     var y = mouseY(e);  
  84.     document.getElementById("XY").innerHTML = "X:" + x + "<br />Y:" + y;  
  85. }  
  86.   
  87. function getX(elementID)  
  88. {  
  89.         var el = elementID  
  90.         return el.offsetLeft  
  91.      
  92. }  
  93.      
  94. function getY(elementID)  
  95. {  
  96.         var el = elementID  
  97.         return el.offsetTop  
  98.      
  99. }  
  100. function getElementPositionX(elemID)  
  101. {  
  102.    var offsetTrail = document.getElementById(elemID);  
  103.    var offsetLeft = 0;  
  104.    while(offsetTrail)  
  105.    {  
  106.       offsetLeft += offsetTrail.offsetLeft;  
  107.       offsetTrail = offsetTrail.offsetParent;  
  108.    }  
  109.     if (navigator.userAgent.indexOf("Mac") != -1 &&  
  110.         typeof(document.body.leftMargin) != "undefined") {  
  111.         offsetLeft += document.body.leftMargin;  
  112.     }  
  113.      
  114.     return offsetLeft;  
  115. }  
  116. function getElementPositionY(elemID)  
  117. {  
  118.    var offsetTrail = document.getElementById(elemID);  
  119.    var offsetTop = 0;  
  120.    while(offsetTrail)  
  121.    {  
  122.       offsetTop += offsetTrail.offsetTop;  
  123.       offsetTrail = offsetTrail.offsetParent;  
  124.    }  
  125.     if (navigator.userAgent.indexOf("Mac") != -1 &&  
  126.         typeof(document.body.leftMargin) != "undefined") {  
  127.         offsetTop += document.body.topMargin;  
  128.     }  
  129.     return offsetTop;  
  130. }  
  131. function getElementPositionXY(elemID)  
  132. {  
  133.    var offsetTrail = elemID;  
  134.    var offsetLeft = 24;  
  135.    var offsetTop =0;  
  136.    while(offsetTrail)  
  137.    {  
  138.       offsetLeft += offsetTrail.offsetLeft;  
  139.       offsetTop += offsetTrail.offsetTop;  
  140.       offsetTrail = offsetTrail.offsetParent;  
  141.    }  
  142.     if (navigator.userAgent.indexOf("Mac") != -1 &&  
  143.         typeof(document.body.leftMargin) != "undefined") {  
  144.         offsetLeft += document.body.leftMargin;  
  145.         offsetLeft += document.body.leftMargin;  
  146.     }  
  147.    document.getElementById("txt_left").innerText = offsetLeft;  
  148.    document.getElementById("txt_top").innerText = offsetTop;  
  149.     document.getElementById("divMsg").style.top = offsetTop + "px";  
  150. }  
  151. //-->  
  152. </script>  
  153. //鼠标的绝对位置:  
  154. <br />  
  155. <span id="XY" style="color:red;"></span><br /><br />  
  156. 控件输入框txtPos的绝对位置：<br />  
  157. X：<span id="txt_left" style="color:red;"></span><br />  
  158. Y：<span id="txt_top" style="color:red;"></span><br />  
  159. <input type="text" name="txtPos" id="txtPos" onfocus="getElementPositionXY(this)"/>  
  160. <br /><br />  
  161. <div id="divMsg" style="height:60px;width:100px;background-color:#cccccc"></div>  
  162. </body>  
  163. </html>  

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以事件触发元素内界的左上角为参考点(包括滚动距离,当有边框时,可能出现负数)

标签：

给我留言