鼠标光标位置 JavaScript

在 web 开发中，获取鼠标光标位置是很常见的需求。通常我们希望获取鼠标光标在网页上的精确位置，以便进行一些特定的操作，比如拖拽、划选等。在 JavaScript 中，我们可以方便地获取鼠标光标在文档中的坐标位置。

方法一：使用 mousemove 事件

最简单的方法是监听 mousemove 事件，获取鼠标光标所处的坐标位置。

document.addEventListener('mousemove', function(e) {
  console.log('X 坐标：' + e.pageX);
  console.log('Y 坐标：' + e.pageY);
});

这样就可以实时获取鼠标光标在文档中的 X 和 Y 坐标。

方法二：使用 clientX 和 clientY 属性

在 mousemove 事件中，还可以通过 clientX 和 clientY 属性获取鼠标光标相对于窗口的坐标位置。

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

如果需要获取光标位置相对于文档的坐标，需要加上滚动条的偏移量。

document.addEventListener('mousemove', function(e) {
  const scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
  const scrollY = document.documentElement.scrollTop || document.body.scrollTop;
  console.log('X 坐标：' + (e.clientX + scrollX));
  console.log('Y 坐标：' + (e.clientY + scrollY));
});

方法三：使用 getBoundingClientRect 方法

通过 getBoundingClientRect() 方法可以获取元素相对于视口的位置和大小。我们可以利用这个方法推算出光标的位置。

document.addEventListener('mousemove', function(e) {
  const target = e.target;
  const { left, top } = target.getBoundingClientRect();
  const x = e.clientX - left + window.scrollX;
  const y = e.clientY - top + window.scrollY;
  console.log('X 坐标：' + x);
  console.log('Y 坐标：' + y);
});

结论

以上就是获取鼠标光标位置的常用方法。根据需求不同，可以选择不同的方法。建议使用方法三，适用性较广，而且可以精确定位鼠标光标位置。