如何使用JavaScript实时获取鼠标位置？

在我们开发网页时，常常会需要获取用户的鼠标位置，以便实现一些动态效果或交互功能。那么，如何使用JavaScript来实时追踪鼠标的位置呢？今天，我们就来聊聊这个有趣的话题。

获取鼠标位置：clientX和clientY属性

要实现鼠标位置的实时追踪，我们可以监听mousemove事件，每当鼠标移动时，这个事件就会被触发。通过事件对象中的clientX和clientY属性，我们可以获取鼠标在页面上的X和Y坐标。

示例代码一：使用document.onmousemove

document.onmousemove = (event) => {
  const { clientX, clientY } = event;
  console.log(`鼠标X坐标: ${clientX}, 鼠标Y坐标: ${clientY}`);
};

在这个例子中，我们将一个事件处理函数赋值给document.onmousemove属性。这意味着，每当鼠标在页面上移动时，这个函数就会被调用。函数中，我们通过事件对象的clientX和clientY属性来获取鼠标的X和Y坐标，并将其打印到控制台。

示例代码二：使用addEventListener

document.addEventListener('mousemove', (event) => {
  const { clientX, clientY } = event;
  console.log(`鼠标X坐标: ${clientX}, 鼠标Y坐标: ${clientY}`);
});

这里，我们使用addEventListener方法来监听mousemove事件。相比直接赋值给document.onmousemove，这种方式更加灵活，可以添加多个监听器。

实际业务场景应用

想象一下，当用户在一个在线绘图应用中绘画时，我们需要实时获取他们的鼠标位置，以便绘制出连续的线条。或者在一个互动地图应用中，我们需要知道用户的鼠标位置，以便显示特定区域的信息。这些都可以通过以上的方法轻松实现。

绘制动态线条

下面是一个实际业务场景中的代码示例：在网页上绘制用户鼠标移动的路径。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', () => { isDrawing = true });
canvas.addEventListener('mouseup', () => { isDrawing = false; ctx.beginPath() });

canvas.addEventListener('mousemove', (event) => {
  if (isDrawing) {
    const { clientX, clientY } = event;
    ctx.lineTo(clientX, clientY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(clientX, clientY);
  }
});

在这个例子中，我们使用<canvas>元素来绘制用户鼠标移动的路径。当用户按下鼠标按钮时，开始绘图；当用户松开按钮时，停止绘图。通过监听mousemove事件，我们获取鼠标位置，并使用canvas的绘图方法在页面上绘制出用户的鼠标轨迹。

结束

通过监听mousemove事件，并利用事件对象的clientX和clientY属性，我们可以轻松地获取鼠标在页面上的位置，并实现各种动态效果或交互功能。不论是简单的鼠标坐标显示，还是复杂的在线绘图应用，掌握这个技巧都会让你在前端开发中如虎添翼！

快试试吧，用JavaScript给你的网站增添一些酷炫的互动效果！