JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで指定した間隔ごとにマウスの位置をキャプチャする方法【サンプルコード解説】

Webアプリケーション開発では、一定間隔でマウスカーソルの現在位置（座標）を取得したいケースがあります。例えば、トラッキングツールやインタラクティブなアニメーション、ユーザー行動の分析などが挙げられます。

本記事では、setInterval() を使って、指定した間隔（この例では3秒）ごとにマウスの位置を自動的にキャプチャして画面に表示するJavaScriptの実装方法を紹介します。

実装のポイント

このサンプルでは、以下の仕組みを使っています。

  • mousemoveイベント：document.bodyにリスナーを登録し、マウスが動くたびに最新のX・Y座標を変数に保存します。
  • clientX / clientY：イベントオブジェクトから取得できるプロパティで、ブラウザの表示領域（ビューポート）左上を基準とした座標を返します。
  • setInterval()：指定したミリ秒ごとに関数を繰り返し実行します。ここでは3000ミリ秒（3秒）を指定しています。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
    font-size: 18px;
    font-weight: 500;
    color: blueviolet;
}
</style>
</head>
<body>
<h1>指定した間隔ごとにマウスの位置をキャプチャする</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>上のボタンをクリックすると、3秒ごとにマウスの位置のキャプチャが開始されます</h3>
<script>
let resultEle = document.querySelector(".result");
let check;
let xCoord, yCoord;
document.body.addEventListener("mousemove", function (event) {
    xCoord = event.clientX;
    yCoord = event.clientY;
});
function displayCoordinate(element) {
    resultEle.innerHTML =
    "X座標 = " + xCoord + "<br> Y座標 = " + yCoord;
}
document.querySelector(".Btn").addEventListener("click", () => {
    setInterval(displayCoordinate, 3000);
});
</script>
</body>
</html>

コードの解説

1. マウス移動の検知

document.body に対して mousemove イベントリスナーを設定し、マウスが動くたびに event.clientX と event.clientY の値をそれぞれ xCoord、yCoord 変数へ格納しています。

2. 座標の定期表示

displayCoordinate() 関数は、保存されている座標を .result 要素の innerHTML に出力します。

3. ボタンクリックで開始

ボタンがクリックされると setInterval(displayCoordinate, 3000) が呼ばれ、以降3秒ごとに displayCoordinate() が実行され、その時点でのマウス座標が画面に表示されます。

出力結果

「CLICK HERE」ボタンをクリックすると、3秒ごとにマウスの位置がキャプチャされて表示されます。

JavaScriptで指定した間隔ごとにマウスの位置をキャプチャする方法【サンプルコード解説】

ボタンをクリックすると、以下のように3秒ごとのマウス座標が更新されていきます。

JavaScriptで指定した間隔ごとにマウスの位置をキャプチャする方法【サンプルコード解説】

まとめ

mousemoveイベントで常に最新の座標を保持しておき、setInterval() で定期的に読み出すことで、指定間隔ごとのマウス位置キャプチャが簡単に実現できます。用途に応じて間隔の変更や、clearInterval() を使った停止処理を追加すると、より実用的になります。

  1. JavaScriptの「for...in」ステートメントとは？オブジェクトのプロパティをループ処理する方法を解説

    JavaScriptのfor...in文は、オブジェクトが持つすべてのプロパティ（列挙可能なプロパティ）を順番に取り出して処理するためのループ構文です。オブジェクト内の各キー（プロパティ名）にアクセスしながら、対応する値を取得したい場合に非常に便利です。for...inの基本的な構文for (let 変数名 in オブジェクト) { // 各プロパティに対して実行したい処理 }ループ変数には、各反復ごとにオブジェクトのプロパティ名（キー）が文字列として代入されます。値そのものを取得するには、「オブジェクト[変数名]」のようにブラケット記法を使ってアクセスします。サンプルコード以下は、for

  2. 【JavaScript】マウスをクリックした瞬間（mousedown）にイベントを即座に発火させる方法

    マウスボタンを押した瞬間にイベントを発生させたい場合、通常の click イベントでは対応できません。なぜなら click イベントは、マウスボタンを押してから離した後にようやく発火するためです。 このようなケースでは、addEventListener() メソッドに mousedown イベントを指定することで解決できます。mousedown は、マウスボタンが押された直後に即座に発火するイベントです。 実装例 以下がサンプルコードです。 <!DOCTYPE html> <html lang="ja"> <head>   &n