由于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. 小规模kvm宿主机管理-webvirtmgr安装

    1.前言WebVirtMgr是近两年来发展较快,比较活跃,非常清新的一个KVM管理平台,提供对宿主机和虚机的统一管理,它有别于kvm自带的图形管理工具(virtual machine manager) ...

  2. Kotlin 区间和循环 Loop和Range

    在kotln中有一种很简单的方式来表达某一个区间的数字. 比如我想存储1~100. 我在其他的语言中可以用数组,步骤大概有三个把. 但是在kotlin中就只需要一步. 代码如下: fun main(a ...

  3. JavaScript定位导航滚动2

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 简单的opengl步骤模板

    以下内容整理自:https://learnopengl-cn.github.io/01%20Getting%20started/03%20Hello%20Window/ 一.初始化 glfw 并设置相 ...

  5. Django 项目重命名

    在日常学习工作过程中,我们难免需要复用以前的项目,这里讲下复用 Django 项目并重命名的过程. 1.修改项目名称,使用 pycharm -> refactor 重命名整个项目. 2.修改 m ...

  6. 在请求中存取属性setAttribute&getAttribute方法

    在请求中保存属性: public void setAttribute(String name,Object o) request.setAttribute("mess"," ...

  7. [译文]Casperjs1.1.0参考文档-安装

    安装 Casperjs能被安装在mac osx,windows 和大多数linux版本 依赖项 PhantomJS1.82及以上 Python2.6及以上(很多人忘了安装python导致安装失败) 1 ...

  8. 18、OpenCV Python 简单实现一个图片生成(类似抖音生成字母人像)

    __author__ = "WSX" import cv2 as cv import numpy as np def local_threshold(img): #局部阈值 gra ...

  9. 【离散数学】 SDUT OJ 哪款赛车最佳?

    哪款赛车最佳? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 四名专家对四款赛车进行 ...

  10. SDUT OJ 数据结构实验之链表四:有序链表的归并

    数据结构实验之链表四:有序链表的归并 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Desc ...