js实现获取鼠标当前的位置

2023年6月11日上午5:00 • JavaScript

获取鼠标当前位置是开发中常需要用到的功能之一。JavaScript可以轻松实现该操作。以下是获取鼠标当前位置的完整攻略。

获取鼠标当前位置的方式

常用的方式是利用鼠标移动事件，不断获取鼠标当前位置的横纵坐标。可以用鼠标移动事件mousemove来实现。

实现代码

下面是一个基本的 JavaScript 实现：

document.addEventListener('mousemove', function(e) {
  console.log('X轴坐标:', e.clientX, 'Y轴坐标:', e.clientY);
});

代码说明：

document 绑定了 mousemove 事件，该事件在鼠标移动时会触发
回调函数中，使用 console.log() 打印出鼠标当前位置的横纵坐标

示例1：鼠标位置跟随

下面的示例展示了如何利用上述方法，让一个图片跟随鼠标移动。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鼠标位置跟随</title>
  <style>
    #box {
      position: relative;
      height: 300px;
      width: 500px;
      margin: 100px auto;
    }
    #image {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <img id="image" src="image.png" alt="Image">
  </div>
  <script>
    var image = document.getElementById('image');
    document.addEventListener('mousemove', function(e) {
      var x = e.clientX;
      var y = e.clientY;
      var box = document.getElementById('box');
      var boxX = box.offsetLeft;
      var boxY = box.offsetTop;
      var imageX = x - boxX;
      var imageY = y - boxY;
      image.style.left = imageX + 'px';
      image.style.top = imageY + 'px';
    });
  </script>
</body>
</html>

示例代码说明：

mousemove 事件被绑定在 document 上
获取鼠标当前位置的横纵坐标
获取图片所在父元素（盒子）的左上角位置，计算出图片相对于盒子的位置
将图片位置设置为相对于盒子的位置

示例2：鼠标位置划线

下面的示例展示了如何利用上述方法，获取鼠标轨迹，绘制轨迹图形。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>鼠标位置划线</title>
  <style>
    #box {
      height: 300px;
      width: 500px;
      margin: 100px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    #canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var box = document.getElementById('box');
    canvas.width = box.clientWidth;
    canvas.height = box.clientHeight;
    var isDrawing = false;
    document.addEventListener('mousemove', function(e) {
      if (isDrawing) {
        ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
        ctx.stroke();
      }
    });
    canvas.addEventListener('mousedown', function(e) {
      isDrawing = true;
      ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);      
    });
    canvas.addEventListener('mouseup', function(e) {
      isDrawing = false;
    });
  </script>
</body>
</html>

示例代码说明：