zoukankan      html  css  js  c++  java
  • JS获取鼠标位置,兼容IE FF

    由于Firefox和IE等浏览器之间对js解释的方式不一样,firefox下面获取鼠标位置不能够直接使用clientX来获取。网上说的一般都是触发mousemove事件才行。我这里有两段代码,思路都一样,就是风格不同。

    第一段代码是利用全局变量来获取实时鼠标的位置。

    1. var xPos;
    2. var yPos;
    3. window.document.onmousemove(function(evt){
    4.      evt=evt || window.event;
    5.     if(evt.pageX){
    6.          xPos=evt.pageX;
    7.          yPos=evt.pageY;
    8.      } else {
    9.          xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
    10.          yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
    11.      }
    12. });

    因为IE和Firefox对clientX的解析不一样,IE认为clientX是鼠标相对整个页面左上角的位置,而Firefox认为是相对当前所见页面左上角的位置。而这段代码最终返回的结果是整个页面左上角的位置。这段代码的缺陷是,xPos和yPos是实时变动的。

    第二段代码是通过函数获取当前时刻的鼠标坐标值

    1. document.onmousemove = mouseMove;  
    2. function mouseMove(ev){  
    3.      ev            = ev || window.event;  
    4.     var mousePos = mouseCoords(ev);  
    5. }  
    6. function mouseCoords(ev){  
    7.     if(ev.pageX || ev.pageY){  
    8.         return {x:ev.pageX, y:ev.pageY};  
    9.      }  
    10.     return {  
    11.          x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,  
    12.          y:ev.clientY + document.body.scrollTop   - document.body.clientTop  
    13.      };  
    14. }  

    这个函数和刚才的函数理论是一致的,先触发mousemove事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。

    这两段代码,个人偏好于后者,现在先把这段代码记下来,这段代码应该是会经常被使用到的。

  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/jymz/p/3987808.html
Copyright © 2011-2022 走看看