JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)

获取鼠标移动时的坐标是前端开发中常用的操作。随着浏览器的不断升级和发展,现在的浏览器大多都能支持 mousemove 事件和相应的 clientXclientY 属性来获取鼠标的坐标。不过对于兼容老版本IE(IE8及以下)的浏览器,我们需要使用其他的方式来获取鼠标坐标。

以下是 JavaScript 获取鼠标移动时的坐标的完整攻略:

1. 监听mousemove事件

我们可以通过监听 mousemove 事件获取鼠标在当前窗口的位置。该事件在鼠标移动时触发,我们获得坐标信息即可。 下面是监听 mousemove 事件的代码:

document.addEventListener('mousemove', function(event) {
  console.log('鼠标x轴坐标:' + event.clientX);
  console.log('鼠标y轴坐标:' + event.clientY);
});

在这段代码中,我们通过 addEventListener 方法来监听文档的 mousemove 事件,并在事件回调函数中输出鼠标的 clientXclientY 信息。

2. 兼容老版本浏览器

对于老版本的浏览器(IE8及以下版本),我们无法直接使用 addEventListener 方法来监听事件。此时我们可以使用 IE 提供的 attachEvent 方法实现事件监听。

document.attachEvent('onmousemove', function(event) {
  console.log('鼠标x轴坐标:' + event.clientX);
  console.log('鼠标y轴坐标:' + event.clientY);
});

这段代码中,我们使用了 attachEvent 方法来监听 mousemove 事件,并在事件回调函数中输出鼠标的 clientXclientY 坐标信息。这样我们就可以在老款浏览器中正确地获取鼠标的位置信息。

3. 处理浏览器兼容性

为了更好地处理浏览器兼容性,我们可以写一个通用的获取鼠标坐标的函数,代码如下:

function getMousePos(event) {
  var e = event || window.event;
  var posX = e.clientX;
  var posY = e.clientY;
  if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
    posX += document.documentElement.scrollLeft;
    posY += document.documentElement.scrollTop;
  } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
    posX += document.body.scrollLeft;
    posY += document.body.scrollTop;
  }
  return {
    x: posX,
    y: posY
  };
}

这个函数可以优雅地处理老版本和新版本浏览器的兼容性,返回当前鼠标位置的 xy 坐标值。

示例说明

示例1

下面是一个示例,演示如何在页面中获取鼠标在当前窗口的位置。当用户移动鼠标时,页面会实时输出当前鼠标位置。即时效果:JSFiddle

<!DOCTYPE html>
<html>
  <head>
    <title>获取鼠标位置</title>
  </head>
  <body>
    <h1>获取鼠标位置</h1>
    <p>移动鼠标以查看当前位置</p>
    <script>
      document.addEventListener('mousemove', function(event) {
        var pos = getMousePos(event);
        console.log('鼠标x轴坐标:' + pos.x);
        console.log('鼠标y轴坐标:' + pos.y);
      });

      function getMousePos(event) {
        var e = event || window.event;
        var posX = e.clientX;
        var posY = e.clientY;
        if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
          posX += document.documentElement.scrollLeft;
          posY += document.documentElement.scrollTop;
        } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
          posX += document.body.scrollLeft;
          posY += document.body.scrollTop;
        }
        return {
          x: posX,
          y: posY
        };
      }
    </script>
  </body>
</html>

在这个示例中,我们使用了 addEventListener 方法来监听文档的 mousemove 事件,并在事件回调函数中输出鼠标的 clientXclientY 信息。同时我们识别浏览器的类型,兼容老版IE。

示例2

下面是另一个示例,用于演示如何在页面中拖拽一个元素,同时实时输出当前鼠标位置。当鼠标拖动元素时,元素会跟随鼠标拖动,并输出实时坐标。即时效果:JSFiddle

<!DOCTYPE html>
<html>
  <head>
    <title>拖拽元素获取鼠标位置</title>
  </head>
  <body>
    <h1>拖拽元素获取鼠标位置</h1>
    <div id="draggable" style="background-color: #00f; color:#fff; width: 100px; height: 100px; position: absolute;">拖动我</div>
    <script>
      var draggable = document.getElementById('draggable');
      var pos1 = 0,
          pos2 = 0,
          pos3 = 0,
          pos4 = 0;

      draggable.addEventListener('mousedown', dragMouseDown);

      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.addEventListener('mousemove', elementDrag);
        document.addEventListener('mouseup', stopElementDrag);
      }

      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        var pos = getMousePos(e);
        pos1 = pos3 - pos.x;
        pos2 = pos4 - pos.y;
        pos3 = pos.x;
        pos4 = pos.y;
        draggable.style.top = (draggable.offsetTop - pos2) + "px";
        draggable.style.left = (draggable.offsetLeft - pos1) + "px";
        console.log('鼠标x轴坐标:' + pos.x);
        console.log('鼠标y轴坐标:' + pos.y);
      }

      function stopElementDrag() {
        document.removeEventListener('mousemove', elementDrag);
        document.removeEventListener('mouseup', stopElementDrag);
      }

      function getMousePos(e) {
        var e = e || window.event;
        var posX = e.clientX;
        var posY = e.clientY;
        if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
          posX += document.documentElement.scrollLeft;
          posY += document.documentElement.scrollTop;
        } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
          posX += document.body.scrollLeft;
          posY += document.body.scrollTop;
        }
        return {
          x: posX,
          y: posY
        };
      }
    </script>
  </body>
</html>

在这个示例中,我们创建了一个可拖拽的元素,并使用 mousedownmousemovemouseup 事件相应鼠标拖拽元素的操作。在 elementDrag 函数中,我们利用 getMousePos 函数输出鼠标的实时位置信息,并让元素跟随鼠标移动。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox) - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • 详细介绍8款超实用JavaScript框架

    详细介绍8款超实用JavaScript框架 JavaScript 拥有十分丰富的生态系统,框架也是其中不可忽视的一部分。下面是8款超实用的 JavaScript 框架,它们受欢迎的原因在于它们能帮助程序员节省时间和提高效率。 1. jQuery jQuery 是最受欢迎的 JavaScript 框架之一。jQuery 旨在简化 HTML 文档遍历、事件处理、…

    JavaScript 2023年5月18日
    00
  • JS 拦截全局ajax请求实例解析

    让我来给大家详细讲解一下“JS 拦截全局ajax请求实例解析”的完整攻略。 什么是全局ajax请求 全局ajax请求指在整个页面中,所有发起ajax请求的位置都被拦截并进行处理。这就需要对ajax进行拦截和处理控制,这样可以更好地控制页面数据请求。 为什么要拦截全局ajax请求 拦截全局ajax请求可以实现以下目的: 统一处理数据请求,便于管理和维护。 能够…

    JavaScript 2023年6月11日
    00
  • 静态页面的值传递(三部曲)

    静态页面的值传递,是指在没有使用后端语言的情况下,通过前端技术在多个页面之间传递数据,实现多页面数据共享的目的。其实现的主要步骤可以归纳为以下三步: 使用URL传递参数 在页面A中使用URL传递参数,在链接中添加参数,并在页面B中通过解析URL获取传递的参数值,从而实现两个页面间的数据传递。 示例1: 在页面A中有一个按钮,点击后跳转至页面B,并将参数id值…

    JavaScript 2023年6月11日
    00
  • Django操作cookie的实现

    下面是关于Django操作cookie的实现的完整攻略。 什么是Cookie Cookie是一段很小的文本信息,由网站发送到访问者的浏览器中,并在之后的访问中由浏览器向服务器发送。Cookie通常用于存储用户的偏好设置、登录状态、购物车信息等。 Django中创建和读取Cookie Django使用HttpRequest对象来操作Cookie。其中,创建Co…

    JavaScript 2023年6月11日
    00
  • 总结JavaScript三种数据存储方式之间的区别

    当我们开发基于 JavaScript 的应用程序时,我们需要考虑如何在应用程序中存储数据。JavaScript 中有很多种数据存储方式,本文将介绍三种最常用的数据存储方式,包括: Cookie Web 存储(LocalStorage 和 SessionStorage) IndexedDB Cookie Cookie 是最早的 Web 储存技术之一,可以通过 …

    JavaScript 2023年6月11日
    00
  • 原生JavaScript实现合并多个数组示例

    下面我将详细介绍如何使用原生JavaScript实现合并多个数组。 1. 简单粗暴的方法 我们可以使用concat()函数将多个数组合并成一个: let arr1 = [1, 2, 3]; let arr2 = [4, 5, 6]; let arr3 = [7, 8, 9]; let arr = arr1.concat(arr2, arr3); consol…

    JavaScript 2023年5月27日
    00
  • JavaScript实现自动切换图片代码

    下面我来为您详细讲解“JavaScript实现自动切换图片代码”的完整攻略。 一、了解需求 首先我们需要了解实现自动切换图片所需的功能和需求: 显示多张图片,并实现自动切换; 当鼠标悬停在某个图片上时,停止自动切换,并显示当前的图片; 当鼠标离开时,继续自动切换。 二、代码实现 1. HTML部分 <div id="img-box"…

    JavaScript 2023年6月11日
    00
  • javascript函数的4种调用方式与this的指向

    如下是关于“javascript函数的4种调用方式与this的指向”的完整攻略: 1. 函数调用 在javascript中,最基本的函数调用方式就是函数调用。当一个函数作为普通函数调用时,函数内的this指向全局对象window。例如: function sayHello() { console.log("Hello " + this.n…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部