如何在 JavaScript 中追蹤滑鼠位置？-js教程-PHP中文網

如何在 JavaScript 中追蹤滑鼠位置？

Linda Hamilton

發布： 2024-12-15 18:31:15

原創

258 人瀏覽過

How Can I Track Mouse Position in JavaScript?

如何在 JavaScript 中追蹤滑鼠位置

追蹤滑鼠位置涉及接收事件，例如 mousemove，它報告滑鼠遊標的座標。透過處理這些事件，我們可以定期檢索並顯示當前位置。

以下解決方案利用附加到視窗的mousemove 事件：

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  var posX = event.pageX;
  var posY = event.pageY;

  console.log(`Current Position: ${posX}, ${posY}`);
}

登入後複製

說明：

onmousemove 事件偵聽器被指派給文檔對象，使其在整個文檔對像中偵聽滑鼠移動
當mousemove 事件發生時，handleMouseMove 函數就會執行。
在函式內部，事件物件用於透過 event.pageX 和 event.pageY 擷取滑鼠位置。
取得的座標隨後會記錄到控制台，您可以使用瀏覽器的 JavaScript查看該控制台console.

帶有計時器的替代解決方案：

如果您需要定期更新滑鼠位置的解決方案，您可以將上述程式碼與計時器功能結合起來:

var mousePos;

document.onmousemove = handleMouseMove;
setInterval(getMousePosition, 100); // Update every 100ms

function handleMouseMove(event) {
  mousePos = {
    x: event.pageX,
    y: event.pageY,
  };
}

function getMousePosition() {
  if (!mousePos) {
    // Handle case where mouse position has not been set yet
  } else {
    // Use the stored mousePos.x and mousePos.y values
  }
}

登入後複製

注意：將處理保持在事件內至關重要處理程序或計時器功能最少，以避免壓垮瀏覽器。考慮在執行複雜計算或更新之前檢查位置是否已變更以最佳化程式碼。

以上是如何在 JavaScript 中追蹤滑鼠位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！