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

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

window.document.onmousemove(function(evt){
      evt=evt ||
window.event;
     if(evt.pageX){
          xPos=evt.pageX;
         
yPos=evt.pageY;
      } else {
         
xPos=evt.clientX+document.body.scrollLeft-document.body.clientLeft;
         
yPos=evt.clientY+document.body.scrollTop-document.body.clientTop;
     
}
});

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

第二段代码是通过函数获取当前时刻的鼠标坐标值
function getPosition(event){
       event=
event || window.event;
       if(event.pageX || event.pageY){
          
return {x:event.pageX, y:event.pageY};
       }
       return
{x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
   
       y:event.clientY + document.body.scrollTop   -
document.body.clientTop
      
};
}
这段代码的来源是这里,这个网站还提供了一些简单的样例给我们玩耍。这个函数和刚才的函数理论是一致的,先触发mousemove事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。

兼容IE FF 获取鼠标位置的更多相关文章

  1. JS获取鼠标位置,兼容IE FF

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

  2. javascript:与获取鼠标位置有关的属性

    javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。 我们通过监听document的mousemove,就可以实时获得鼠标位置。 但是!!event中和鼠标相关的属性太多了 ...

  3. jq获取鼠标位置

    jq获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. C++获取鼠标位置及全局检测鼠标行为

    1.获取鼠标位置(在屏幕的位置)  CPoint m_mouse; GetCursorPos(&m_mouse); 2. 屏幕转化为客户端(控件的相对位置)& 客户端位置转化为屏幕位置 ...

  5. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

  6. Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现

    Adobe Edge Animate –获取鼠标位置及跟随鼠标功能实现 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 在网络上浏览有关Edge相关问题的时 ...

  7. JavaScript获取鼠标位置的三种方法

    在一些DOM操作中我们经常会跟元素的位置打交道,鼠标交互式一个经常用到的方面,令人失望的是不同的游览器下会有不同的结果甚至是有的游览器下没结果,这篇文章就鼠标点击位置坐标获取做一些简单的总结. 获取鼠 ...

  8. C# 图像处理:获取鼠标位置信息(全局)

    Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...

  9. canvas获取鼠标位置

    canvas获取鼠标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. [转帖知乎]5G 网络和 4G 网络有什么区别?

    5G 网络和 4G 网络有什么区别? 先放上一篇有史以来最强的5G科普: 一个简单且神奇的公式 今天的故事,从一个公式开始讲起. 这是一个既简单又神奇的公式.说它简单,是因为它一共只有3个字母.而说它 ...

  2. 二分图最大权匹配模板(pascal)

    用uoj80的题面了: 从前一个和谐的班级,有 nlnl 个是男生,有 nrnr 个是女生.编号分别为 1,…,nl1,…,nl 和 1,…,nr1,…,nr. 有若干个这样的条件:第 vv 个男生和 ...

  3. c++/ boost 库常见错误及解决方法总结

    1. error LNK2019: 无法解析的外部符号 "class boost::system::error_category const & __cdecl boost::sys ...

  4. MT【176】两两乘积

    求$1,2\cdots,n$两两乘积的平均值____ 解答:$\dfrac{1}{C_n^2}\sum\limits_{1\le i<j\le n}{ij}=\dfrac{1}{n(n-1)}( ...

  5. 用JS制作博客页面背景随滚动渐变的效果

    今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...

  6. java基础知识疑难点

    1.“static”关键字是什么意思?Java中是否可以覆盖(override)一个private或者是static的方法? “static”关键字表明一个成员变量或者是成员方法可以在没有所属的类的实 ...

  7. [学习笔记]凸优化/WQS二分/带权二分

    从一个题带入:[八省联考2018]林克卡特树lct——WQS二分 比较详细的: 题解 P4383 [[八省联考2018]林克卡特树lct] 简单总结和补充: 条件 凸函数,限制 方法: 二分斜率,找切 ...

  8. CSUOJ 1170 A sample problem

    J: A Simple Problem Submit Page   Time Limit: 1 Sec     Memory Limit: 128 Mb     Submitted: 87     S ...

  9. Java流程控制---个人参考资料

    前言:我写博客的目的很简单,很单纯,把自己平时学的东西,放到博客上,空闲的时间,就可以看看自己曾经看到过得东西. Java流程控制语句:判断结构.选择结构.循环结构 一.判断结构 判断结构包括if 分 ...

  10. libvirt工具实现虚拟机管理

    libvirt工具实现虚拟机管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.介绍virt-install命令的常用参数 virt-install是一个命令行工具,它能够为K ...