JavaScript でマウスの位置を追跡する
JavaScript でマウスの動きを追跡するために、イベントリスナーを利用します。イベントリスナーは、起こっている変化を聞き続けるものです。たとえば、mousedown イベントは、ユーザーがマウスボタンをクリックしたときにのみトリガーされます。
JavaScript にはさまざまなマウスイベントがありますが、マウスの位置を追跡したいので、そのうちの mousemove イベントに焦点を当てます。マウスイベントの完全なリストを表示するには、マウスイベント MDN ドキュメントにアクセスしてください。
JavaScript でマウスイベントを追跡するさまざまな方法
マウスの位置を追跡するには、ブラウザのタブ内でその x 軸（水平位置）と y 軸（垂直位置）を見つける必要があります。ブラウザの左上隅が (0,0) で表されていることにお気づきかもしれません。マウスを水平に動かすと x の位置が変わり、マウスを垂直に動かすと y の位置が変わります。
ブラウザのタブ内でマウスのこれらの x と y の位置を取得するには、2つの異なる方法があり、これらの方法は次のとおりです。
- Web ページのサイズに対するマウスの位置を追跡する場合は、
pageXおよびpageYを使用します。 - 画面の表示領域に基づいてマウスの位置を追跡する場合は、
clientXおよびclientYを使用します。
JavaScript で PageX、PageY、および clientX、clientY を使用してマウスの位置を追跡する
以下の例で、これらの両方の方法を理解しましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="height: 1000px;">Div with height 1000px...</div>
<script src="./script.js"></script>
</body>
</html>
ここに、HTML ドキュメントがあります。body タグ内には、テキストと 1000px の height を含む div 要素があります。この div 要素にこれだけの高さを与えたのには理由があります。div にこれだけの高さを指定すると、Web ページ内にスクロールバーが表示されます。これは、マウスの動きを追跡する上記の両方の方法を説明するために必要です。
次に、以下のスクリプトを HTML ドキュメントにリンクするスクリプトタグがあります。
function mousemove(event) {
console.log(
'pageX: ', event.pageX, 'pageY: ', event.pageY,
'clientX: ', event.clientX, 'clientY:', event.clientY)
}
window.addEventListener('mousemove', mousemove);
スクリプトファイルの addEventListener 関数を使用して、ウィンドウオブジェクトに mousemove イベントを追加しました。この関数は 2つのパラメーターを取ります。最初のパラメーターは、追加するイベントです。2 番目のパラメーターは、イベントがトリガーされた後に実行される関数です。
この場合、関数 mousemove() を作成し、それをイベントリスナーへのコールバックとして渡しました。この関数は、引数として event を取ります。この event 変数は、マウスの更新された x と y の位置を提供します。mousemove() 関数には任意の名前を付けることができますが、正確なイベント名をイベントリスナーに渡す必要があります。そうしないと、機能しません。
mousemove() 関数内には、event.pageX、event.pageY、および event.clientX、event.clientY を使用したマウス値 console.log() があります。以下のスクリーンショットは、上記のコードの出力を示しています。
コンソールで出力を見ると、pageX, と clientX が同じ値を示しており、pageY と clientY が同じ値を示しているため、違いはわかりません。まだページをスクロールしていないので、同じ値を取得しています。
ページをスクロールして値を確認すると、値に違いがあります。以下のスクリーンショットはこれを示しています。
ページをスクロールした後、イベント pageX および pageY によって提供される値は、イベント clientX および clientY によって提供される値よりも大きくなります。これは、pageX と pageY が Web ページの最初から x と y の値を計算するのに対し、clientX と clientY は画面の表示部分に基づいて値を計算するためです。
後で、これらのマウスの位置を取得して HTML 要素に適用し（要素の左と上の値を更新することにより）、マウスカーソルが移動する場所に関係なく、要素もそれに追従するようにすることもできます。これを実現するには、他のマウスイベントも使用する必要があります。
ここで、これらのマウスイベントのどれを実際に使用するかについて質問を受けるかもしれません。これに対する答えは、ユースケースによって異なります。画面の表示領域内でのみマウスの位置を追跡する場合は、clientX および clientY を使用します。それ以外の場合は、pageX および pageY マウスイベントを使用して、Web ページの先頭からマウスの位置を計算できます。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn