由于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. IO模型《二》阻塞IO

    阻塞IO(blocking IO) 在linux中,默认情况下所有的socket都是blocking,一个典型的读操作流程大概是这样: 当用户进程调用了recvfrom这个系统调用,kernel就开始 ...

  2. 渗透测试工具实战技巧 (转载freebuf)

    最好的 NMAP 扫描策略 # 适用所有大小网络最好的 nmap 扫描策略 # 主机发现,生成存活主机列表 $ nmap -sn -T4 -oG Discovery.gnmap 192.168.56. ...

  3. Java程序员修炼之路

    作者简介:王成委,CSDN知识库特邀编辑,Java高级工程师,熟悉Java编程语言和Oracle数据库.专注于高并发架构设计和大数据存储方向的研究. 我们为什么选择Java 大多数人选择Java可能只 ...

  4. 【转】如何把CD上的音乐拷贝到电脑上

    参考:https://www.ixueshu.com/document/9c44893da6e90cf7318947a18e7f9386.html 参考:https://jingyan.baidu.c ...

  5. get与post中文乱码问题

    Jsp默认的字符编码格式是iso-8859-1 因为post方法与get方法传递参数的方式不一样,所以有不同的解决方法. 一.post乱码解决方法: 1.设置请求和响应的编码方式 //设置请求的编码格 ...

  6. NPOI.XWPF生成WORD,设置Table单元格的背景色

    tr.GetCell().SetColor("#fbd4b4");

  7. SDUT OJ 图结构练习——最短路径 ( Floyed 算法 AND Dijkstra算法)

    图结构练习——最短路径 Time Limit: 1000 ms            Memory Limit: 65536 KiB Submit Statistic Discuss Problem ...

  8. ASP.NET后台取html控件值方式

    1.Request.Form[“cbName”]: 可以在后台取到所有为name 为的控件的value值 2.可以通过 把html控件的值付给HiddenField,然后后台调用 3.就是自定义属性 ...

  9. tornado 02 输出、输入和URL传参

    tornado 02 输出.输入和URL传参 一.输出 write输出到页面 #write可以接受的对象 #write() 可以接受3种对象:bytes Unicode字符(二进制字符) 字典 #如果 ...

  10. 洛谷 P3275 [SCOI2011]糖果

    题目链接 题解 差分约束 学过的应该都会做 不会的自行百度,这里不多讲 opt=1 连一条长度为0的双向边 opt=2 (u->v) \(len=-1\) opt=3 (v->u) \(l ...