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

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

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

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

1. 监听`mousemove`事件

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

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

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

2. 兼容老版本浏览器

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

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

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

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
  };
}

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

示例说明

示例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 事件，并在事件回调函数中输出鼠标的 clientX 和 clientY 信息。同时我们识别浏览器的类型，兼容老版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>

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