JavaScript でマウスの位置を追跡するにはどうすればよいですか?

JavaScript でマウスの位置を追跡する方法

マウスの位置を追跡するには、マウス カーソルの座標を報告する、mousemove などのイベントの受信が必要です。これらのイベントを処理することで、現在の位置を定期的に取得して表示できます。

次の解決策は、ウィンドウにアタッチされている Mousemove イベントを利用します。

document.onmousemove = handleMouseMove;

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

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

説明:

1. onmousemove イベント リスナーはドキュメント オブジェクトに割り当てられ、オブジェクトはドキュメント オブジェクト全体でマウスの動きをリッスンします。 webpage.
2. mousemove イベントが発生すると、handleMouseMove 関数が実行されます。
3. 関数内では、イベント オブジェクトを利用して、event.pageX とevent.pageY を使用してマウスの位置を取得します。
4. 取得された座標はコンソールに記録され、ブラウザの 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 中国語 Web サイトの他の関連記事を参照してください。