由于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事件,然后获取了事件之后,分别判断浏览器类型。这段代码的优点是,不适用全局变量,并且可以随用随拿,只要调用这个函数,就能够获取鼠标坐标。

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

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

  1. js获取鼠标位置的各种方法

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

  2. js获取鼠标位置

    1.PageX/PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化2.clientX/clientY:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即 ...

  3. js 获取 鼠标位置 和获取元素位置

    ]; body.addEventListener("mousemove", outpostion); function outpostion() { console.log(&qu ...

  4. 兼容IE FF 获取鼠标位置

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

  5. js如何获取鼠标位置

    获取鼠标位置,首先需要加载js文件: 然后设置一个div,给定大小: 最后进行具体操作: //首先要先设置一个div,给定大小 <div id="m"></div ...

  6. jq获取鼠标位置

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

  7. js获取元素位置和style的兼容性写法

    今天说一下js获取元素位置和style的方法.当然不只是element.style那么简单.. 主角:getBoundingClientRect,getClientRects,getComputedS ...

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

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

  9. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

随机推荐

  1. Codeforces Round #551 (Div. 2)A. Serval and Bus

    A. Serval and Bus time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. 单机,伪分布式,完全分布式-----搭建Hadoop大数据平台

    Hadoop大数据——随着计算机技术的发展,互联网的普及,信息的积累已经到了一个非常庞大的地步,信息的增长也在不断的加快.信息更是爆炸性增长,收集,检索,统计这些信息越发困难,必须使用新的技术来解决这 ...

  3. 题解 P1720 【月落乌啼算钱】

    题目链接 定义一个函数比较好求. #include<bits/stdc++.h>//万能头文件 using namespace std; double F(int x)//定义函数,为了保 ...

  4. 二分查找法C语言实现

    [问题描述] 生成一个随机数组A[64] ,在数组中查找是否存在某个数num. [答案] #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> ...

  5. Spring核心--IOC&AOP

    Ioc(控制反转) 所谓的控制反转就是应用本身不负责依赖对象的创建及维护,依赖对象的创建及维护是由外部容器负责的.这样控制权就由应用转移到了外部容器,控制权的转移就是所谓反转. AOP(面向切面编程) ...

  6. Android Studio for windows环境搭建

    Android Studio环境搭建 个人博客 欢迎大家多多关注该独立博客:   csdn博客  一直想把自己的经验分享出来,记得上次写博客还是ok6410的笔记,感觉时代久远啊.记得那个时候我还一心 ...

  7. postgresql编译安装与调试(一)

    因为最近组里的项目和postgresql有关,并且需要查看和调试源码,所以专门学习了一下如何安装和调试postgresql,此博文用来记录自己的安装和调试过程.安装环境是CentOS6(CentOS7 ...

  8. Udp 网络字节序

    1.网络上的数据是一个字节一个字节的串行传递的. 2.字节序,规定,在内存里存储时,低字节在前称为小端,高字节在前称为大端,(现在主流系统都是小端的) 3.网络字节序,如果先传高字节,则是大端传输:如 ...

  9. shell-004:检测机器存活或者网络陡动情况!

    如下图情况,我们监测的就是此数据,当大于50%了,我们就可以设置告警等! #!/bin/bash # 用ping检测一台机器的存活或者网络波动情况 # 检测机器的丢包率来检测网络波动情况!! n=`p ...

  10. webpack 打包css报错 Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

    是webpack4和extract-text-webpack-plugin的兼容性问题 执行命令:npm install extract-text-webpack-plugin@next --save ...