使用js獲取滑鼠座標

王铁柱6發表於2024-11-30
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> 左上角的。

選擇哪種方法？

選擇哪種方法取決於你的需求：

  • 需要相對於瀏覽器視窗定位元素，使用 clientX 和 clientY。
  • 需要考慮頁面滾動，使用 pageX 和 pageY。
  • 需要相對於特定元素內部的定位，使用 offsetX 和 offsetY。

這個更完整的示例包含了如何在頁面上顯示座標，以及如何獲取相對於特定元素的座標，方便你更好地理解和應用。 記得根據你的具體需求選擇正確的方法。

相關文章