使用js获取鼠标坐标

// 获取鼠标坐标有两种主要方式，取决于你想获取相对于什么位置的坐标：

// 1. 相对于视口 (viewport) 的坐标：

document.addEventListener('mousemove', function(event) {
  const x = event.clientX;
  const y = event.clientY;

  // 使用 x 和 y 坐标，例如显示在页面上
  console.log(`视口坐标：X: ${x}, Y: ${y}`);
  // 或更新页面元素的位置
  // document.getElementById('mouse-coords').textContent = `X: ${x}, Y: ${y}`;
});


// 2. 相对于文档 (document) 的坐标：

document.addEventListener('mousemove', function(event) {
  const x = event.pageX;
  const y = event.pageY;

  // 使用 x 和 y 坐标
  console.log(`文档坐标：X: ${x}, Y: ${y}`);
});


// 3. 相对于特定元素的坐标：

const myElement = document.getElementById('my-element'); // 获取目标元素

myElement.addEventListener('mousemove', function(event) {
  const x = event.offsetX;
  const y = event.offsetY;

  // 使用 x 和 y 坐标
  console.log(`相对于 my-element 的坐标：X: ${x}, Y: ${y}`);
});



//  完整示例 (显示在页面上):

<!DOCTYPE html>
<html>
<head>
<title>鼠标坐标</title>
<style>
body { margin: 0; }
#mouse-coords {
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
}
#my-element {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin: 50px auto;
}
</style>
</head>
<body>

<div id="mouse-coords"></div>
<div id="my-element"></div>

<script>
  const coordsDisplay = document.getElementById('mouse-coords');
  const myElement = document.getElementById('my-element');

  document.addEventListener('mousemove', (event) => {
    coordsDisplay.textContent = `视口坐标：X: ${event.clientX}, Y: ${event.clientY}`;
  });

  myElement.addEventListener('mousemove', (event) => {
    console.log(`相对于 my-element 的坐标：X: ${event.offsetX}, Y: ${event.offsetY}`);
  });

</script>

</body>
</html>

解释:

event.clientX 和 event.clientY: 获取鼠标指针相对于浏览器视口 (viewport) 的 x 和 y 坐标。视口是指浏览器窗口中当前可见的区域。如果页面滚动，这些坐标不会改变。
event.pageX 和 event.pageY: 获取鼠标指针相对于整个文档的 x 和 y 坐标。这包含了滚动条滚动的距离。如果页面向下滚动 100px，pageY 就会比 clientY 大 100。
event.offsetX 和 event.offsetY: 获取鼠标指针相对于触发事件的特定元素的 x 和 y 坐标。例如，如果事件发生在一个 <div> 元素内，这些坐标就是相对于 <div> 左上角的。