注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

古城风~~~

竹密无妨溪水过,天高不碍白云飞。这天下总有一份是属于我古城的天地!

 
 
 

日志

 
 

用 javascript 获取鼠标(光标)的坐标位置 兼容IE/Firefox等浏览器  

2009-07-08 22:20:07|  分类: 网页特效/javascr |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

  • 文章作者:[自由天堂] | 文章来源:互联网

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

    1. <script type="text/javascript">

    2.  

    3. // 说明:获取鼠标位置

    4. // 整理:http://www.web600.net

    5. // 来源:http://www.webreference.com

    6.  

    7. function mousePosition(ev){

    8.     if(ev.pageX || ev.pageY){

    9.         return {x:ev.pageX, y:ev.pageY};

    10.     }

    11.     return {

    12.         x:ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,

    13.         y:ev.clientY + document.documentElement.scrollTop  - document.body.clientTop

    14.     };

    15. }

    16.  

    17. </script>

    由于这个需求我们经常用到,所以我们将这段代码独立成一篇文章,供新手查询。

    使用方式:

    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 中,我们也把这些加进去。

    很幸运,我们现在已经用 mousePosition 函数解决了坐标问题,不需为此费心了。

     

    下面是完整的事例,将其保存为HTML即可运行:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

    <meta name="auther" content="fq" />

    <title>获取鼠标坐标</title>

    </head>

    <body>

    <script type="text/javascript">

    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

           };

     }

    function mouseMove(ev){

        ev = ev || window.event;

        var mousePos = mousePosition(ev);

        document.getElementById('xxx').value = mousePos.x;

      document.getElementById('yyy').value = mousePos.y;

    }

    document.onmousemove = mouseMove;

    </script>

    X:<input id="xxx" type="text" />  Y:<input id="yyy" type="text" />

    </body>

    </html>

  评论这张
 
阅读(1500)| 评论(5)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017