通过JS 获取Mouse Position(鼠标坐标)的代码

获取鼠标坐标是JavaScript中的常见需求之一，可以通过鼠标事件对象获取鼠标相对于页面的坐标位置。

以下是获取鼠标位置的代码：

document.addEventListener('mousemove', (event) => {
  const mouseX = event.clientX;
  const mouseY = event.clientY;
  console.log(`Mouse position: (${mouseX}, ${mouseY})`);
});

该代码会监听文档上的mousemove事件，并使用事件回调函数来获取鼠标的的坐标位置。事件回调函数中的event参数包含了事件的相关信息，其中包含了鼠标的坐标位置。

在事件处理函数中， event.clientX和event.clientY分别代表鼠标相对于浏览器视口的 x 和 y 坐标位置。可以将这些值用于更改 DOM 元素的位置或进行其他操作。

另一个示例可以在页面中使用单独的函数来获取鼠标位置，并将其作为参数传递给其他函数接受，代码如下：

function getMousePos(event) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;

  const mouseX = (event.clientX - rect.left) * scaleX;
  const mouseY = (event.clientY - rect.top) * scaleY;

  return { x: mouseX, y: mouseY };
}

// 监听canvas鼠标的移动事件
canvas.addEventListener('mousemove', function (event) {
  const mousePos = getMousePos(event);
  console.log(`Mouse position: (${mousePos.x}, ${mousePos.y})`);
});

在这个示例中，我们首先获取了鼠标相对于canvas的坐标位置（即使用canvas.getBoundingClientRect() 获取画布的位置），将其缩放到绘图区域（canvas）的大小，并将x，y坐标封装在一个对象中返回。然后我们只需将返回的对象传递给其他函数来使用鼠标位置。

以上是如何使用JS获取鼠标位置的代码完整攻略，希望对你有所帮助。