js 获取鼠标的位置

js 获取鼠标的位置

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

转载

标签：  鼠标位置   获取鼠标位置   event   杂谈

分类： WEB开发

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

Javascript:

1.  
2. <script type= "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. x:ev. clientX + document. body. scrollLeft - document. body. clientLeft,
14. y:ev. 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>