js 获取鼠标的位置

 

(2009-12-14 10:51:39)

jquery检测鼠标点击位置 js判断鼠标位置_文档转载


标签： 

鼠标位置

获取鼠标位置

event

杂谈

分类： WEB开发


javascript  获取当页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip）  等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同，本文详细介绍了浏览器在处理这些属性时的差异和最终的解决方法。
查看示例

Javascript: 


1. 
2. "text/javascript"> 
    
3. 
4. // 说明：获取鼠标位置
5. // 整理：http://www.codebit.cn
6. // 来源：http://www.webreference.com
7. 
8. function mousePosition 
     (ev 
     ) 
     {
9. if 
     (ev. 
     pageX || ev. 
     pageY 
     ) 
     {
10. return  
     {x:ev. 
     pageX, y:ev. 
     pageY 
     }; 
    
11. }
12. return  
     {
13. clientX + document. 
     body. 
     scrollLeft - document. 
     body. 
     clientLeft, 
    
14. clientY + document. 
     body. 
     scrollTop - document. 
     body. 
     clientTop
15. }; 
    
16. }
17. 
18. 
      </script>

使用方式：

Code: 

document.onmousemove  
  =  
  mouseMove; 
  

 function  
  mouseMove(ev){ 
  
   
    
    
    
  ev  
  =  
  ev  
  ||  
  window.event; 
  
   
    
    
    
  var  
  mousePos  
  =  
  mousePosition(ev); 
  
 }

关于代码的详细说明，原文中已经介绍，现转到此处：



我们首先要声明一个 

  evnet  对象，无论移动、点击、按键等，都会激活一个  evnet  ，在  Internet  Explorer  里，    event  是全局变量，会被存储在  window.event  里．  在  firefox  或者其他浏览器，event  会被相应的函数获取．当我们将mouseMove函数赋值于document.onmousemove，mouseMove  会获取鼠标移动事件。


为了让 

ev  在所有浏览器下获取了  event  事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值。在  MSIE  中  ev  为空，所以得到  window.event  。


因为在这篇文章中我们需要多次获取鼠标位置，所以我们设计了一个 

mousePosition  函数，它包含一个参数  ：  event  。


因为我们要在 

MSIE  和其他浏览器下运行，Firefox  和其他浏览器用  event.pageX  和  event.pageY  来表示鼠标相对于文档的位置，如果你有一个  500*500  的窗口并且你的鼠标在绝对中间，那么  pageX  和  pageY    的值都是  250，如果你向下滚动    500，  那么  pageY  将变成  750。


MSIE 

正好相反，它使用  event.clientX  和  event.clientY  表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY  依然是  250，因此，我们需要添加  scrollLeft  和  scrollTop  这两个相对于文档的属性。最后，MSIE  中文档并不是从  0，0  开始，而是通常有一个小的边框（通常是  2  象素），边框的大小定义在    document.body.clientLeft  和  clientTop  中，我们也把这些加进去。


完成代码： 

<script type="text/javascript"> 
 

 // 说明：获取鼠标位置 
 
 // 整理：http://www.codebit.cn 
 
 // 来源：http://www.webreference.com 
 

 function mousePosition(ev){ 
 
   
   
   
    
   
   
    
 if(ev.pageX || ev.pageY){ 
 
   
   
   
    
   
   
    
   
   
   
    
   
   
    
 return {x:ev.pageX, y:ev.pageY}; 
 
   
   
   
    
   
   
    
 } 
 
   
   
   
    
   
   
    
 return { 
 
   
   
   
    
   
   
    
   
   
   
    
   
   
    
 x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
 
   
   
   
    
   
   
    
   
   
   
    
   
   
    
 y:ev.clientY + document.body.scrollTop  
  - document.body.clientTop 
 
   
   
   
    
   
   
    
 }; 
 
 } 
 

 document.onmousemove = mouseMove; 
 

 function mouseMove(ev){ 
 
   
   
   
  ev = ev || window.event; 
 
   
   
   
  var mousePos = mousePosition(ev); 
 

   
   
   
    
   
   
    
 document.getElementByIdx('mouseXPosition').value = mousePos.x; 
 
   
   
   
    
   
   
    
 document.getElementByIdx('mouseYPosition').value = mousePos.y; 
 
 } 
 

 </script> 
 

  －－－－－－－－－－－－jquery 方式－－－－－－－－－ 

 

  <script type="text/javascript">  
 
 $(document).mousemove(function(e) {  
 
 var xx = e.originalEvent.x || e.originalEvent.layerX || 0;  
 
 var yy = e.originalEvent.y || e.originalEvent.layerY || 0;  
 
 $("#testDiv").text(xx + '---' + yy);  
 
 });  
 
 </script>