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日

相关文章

  • 详解Javascript百度地图接口开发文档中的类和方法

    下面我将详细讲解百度地图API开发文档中的部分类和方法。 常用类 Map类 地图类,用于在页面上展示地图。可以设置地图的初始中心点、缩放级别等信息。常用方法包括: centerAndZoom(center: Point, zoom: number):设置地图的中心点和缩放级别。 addOverlay(overlay: Overlay):向地图上添加叠加层(如…

    JavaScript 2023年6月11日
    00
  • js实现非常简单的焦点图切换特效实例

    下面我将详细讲解如何实现JS实现非常简单的焦点图切换特效。 1. 理解需求 在动手编写代码之前,我们需要先清楚自己要做什么。根据题目描述,我们需要实现一个简单的焦点图切换特效,其中最基本的要求就是能够自动轮播图片。除此之外,还可以设置左右切换按钮、底部焦点导航等功能,以便用户手动切换图片。 2. HTML结构 在开始编写JS代码之前,我们需要先构建一个基本的…

    JavaScript 2023年6月11日
    00
  • JavaScript Split()方法

    JavaScript的split()方法用于将字符串分割成字符串数组,返回数组。它可以按照指定的分割符来分割字符串。以下是详细讲解split()方法的攻略: 语法 string.split(separator, limit) 参数:- separator(必须):用于指定分割符的字符串或正则表达式。- limit(可选):一个整数,限定分割后的数组长度。 基…

    JavaScript 2023年5月18日
    00
  • js中apply和call的理解与使用方法

    下面是关于“js中apply和call的理解与使用方法”的完整攻略: 一、概述 在 JavaScript 中,call() 和 apply() 都是 Function 原型对象上的方法,主要用于改变函数运行时的上下文对象(即 this 指向)。 在使用时,两者的区别主要在于传递参数的方式不同。call() 接收的是一个参数列表,而 apply() 接收的是一…

    JavaScript 2023年6月10日
    00
  • 使用 JavaScript 进行函数式编程 (一) 翻译

    我来为您详细讲解“使用 JavaScript 进行函数式编程 (一) 翻译”的完整攻略。 标题 使用 JavaScript 进行函数式编程 (一) 翻译 简介 函数式编程(Functional Programming)是一种在编程语言中处理函数的方法。JavaScript 作为一种多范式语言,也支持函数式编程。本文将带您了解 JavaScript 中的函数式…

    JavaScript 2023年5月18日
    00
  • 从js向Action传中文参数出现乱码问题的解决方法

    针对“从js向Action传中文参数出现乱码问题的解决方法”,会采取以下步骤: 步骤一:修改前端代码 在前端JS中使用encodeURIComponent()方法将参数进行编码,然后再传递给后端Action。 示例1:传递中文参数username var username = "张三"; var url = "example.c…

    JavaScript 2023年5月19日
    00
  • JS实现简易日历效果

    下面是详细讲解JS实现简易日历效果的完整攻略。 1.准备工作 在开始之前,我们需要准备以下工作: 一个HTML文件,用于展示日历 一个CSS文件,用于美化页面 一个JS文件,用于实现日历功能 2.HTML结构 我们需要在HTML中添加以下结构: <div class="calendar"> <div class=&quo…

    JavaScript 2023年5月27日
    00
  • express异步函数异常捕获示例详解

    下面将详细讲解“express异步函数异常捕获示例详解”的完整攻略。 什么是异步函数异常捕获 当我们在使用异步函数的时候,如果出现异常错误,如果不进行捕获错误会导致整个应用程序宕机,这会对我们的应用程序和用户造成不便和不良影响。所以很有必要对异步函数的异常进行捕获,防止代码运行出现异常。 express应用中的异常捕获 在express中,我们可以使用try…

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