由于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. 教你如何选择BI数据可视化工具

    本文来自网易云社区. 关于如何选择BI数据可视化工具,总体而言,主流BI产品在选择的时候要除了需要考虑从数据到展现.从公司内到公司外等各种场景,结合前面朋友的回答,还需要考虑以下几点:1:以后的数据处 ...

  2. C# 向TIM或者QQ自动发送中文消息【微信也是可用的】 附测试GIF

    之前用C++简单的写了一个demo 现在用C#写了完整版 定义字符 定义发送数量 定义发送对象 注意事项 QQ必须单独一个窗体 微信对象在输入名字的时候必须写微信 源代码 using System; ...

  3. dubbo 面试题

      dubbo是什么 dubbo是一个分布式框架,远程服务调用的分布式框架,其核心部分包含:集群容错:提供基于接口方法的透明远程过程调用,包括多协议支持,以及软负载均衡,失败容错,地址路由,动态配置等 ...

  4. hexo的jacman主题配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 这是在我搭建博客时用的主题,这个主题时基于pacman修改的,同时我也是借助于wuchong同时他还在一直更新.一下时我的一些基本配置: 相关文章 ...

  5. FJWC2019 子图 (三元环计数、四元环计数)

    给定 n 个点和 m 条边的一张图和一个值 k ,求图中边数为 k 的联通子图个数 mod 1e9+7. \(n \le 10^5, m \le 2 \times 10^5, 1 \le k \le ...

  6. Gym - 101908G 二分答案+最大流

    After the end of the truck drivers' strike, you and the rest of Nlogônia logistics specialists now h ...

  7. AtCoder - 2565 枚举+贪心

    There is a bar of chocolate with a height of H blocks and a width of W blocks. Snuke is dividing thi ...

  8. Python之freshman08 Socket

    1. Socket介绍 概念 A network socket is an endpoint of a connection across a computer network. Today, mos ...

  9. JavaWeb学习笔记(十一)—— JavaWeb开发模式【转】

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

  10. struts2学习笔记(四)——访问Servlet的API&结果跳转&数据封装

    一.Struts2访问Servlet的API 前面已经对Struts2的流程执行完成了,但是如果表单中有参数如何进行接收?又或者我们需要向页面保存一些数据,又要如何完成呢?我们可以通过学习Struts ...