由于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. sublime text3 增加emmett插件

    本内容基于Windows环境)一.已安装有Sublime Text3 二.安装Package Control    安装这个后,可以在线安装所需的插件    方法1.Ctrl+~打开控制台,在控制台输 ...

  2. 基于 Laravel 的 文件管理

    以 laravel 5.5 为例,框架集成了文件系统和云存储功能 可以实现文件夹列表.创建.重命名.删除,文件列表.上传.重命名.删除等操作 一.先进行配置 在 config 文件夹下有 filesy ...

  3. JS 中的require 和 import 区别

    这两个都是为了JS模块化编程使用. 遵循规范 require 是 AMD规范引入方式 import是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法 调用时间 require是运行时调 ...

  4. EntityFramework异常The specified cast from a materialized 'System.Double' type to the 'System.Single' type is not valid.

    实体类: public class ReportEntity { public string FactorName { get; set; } public double MaxVal { get; ...

  5. Day18-前端和后端怎么区分

    前端 - 通常是针对浏览器而开发的,是在浏览器端运行的程序,而后端 - 针对的是服务器,准确的来说应该是服务器端开发.前端开发偏向于用户体验,比较直观,服务器端开发偏向于性能. 前端和后端指的是网站建 ...

  6. Javascript实现倒计时和根据某时间开始计算时间

    JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...

  7. VirtualBox 文件共享及网络配置技巧

    文件共享   1. 安装增强功能 2. 分配数据空间 这样就可以在virtualbox里访问本地的数据了:   网络配置

  8. 【转】四款经典3.7v锂电池充电电路图详解

    3.7v锂电池充电电路图(一) 1.锂电池的充电: 根据锂电池的结构特性,最高充电终止电压应为4.2V,不能过充,否则会因正极的锂离子拿走太多,而使电池报废.其充放电要求较高,可采用专用的恒流.恒压充 ...

  9. Django中简单添加HTML、css、js等文件(非正规添加,适合小白)

    Django中简单添加HTML.css.js等文件 首先申明下自己的环境, python版本3.65(亲测3.7版本有毒,没解决掉!) Django版本1.11.15(版本比较成熟,也可以用最新的版本 ...

  10. Java: 扩大字节缓存区的大小,提升AIO的处理性能(并发性能)

    前些日了,对AIO与NIO的并发性能进行了比较,在低并发的情况下,NIO性能表现比AIO好一些,主要原因是,NIO中可以使用FileChannel.transferTo(long position,  ...