JavaScriptでカーソルの位置を取得する方法をメモ。
サンプルコード
カーソルの位置を取得する方法として、screenX/screenY・pageX/pageY・clientX/clientY・offsetX/offsetY があります。
mousemoveイベントでそれぞれの値を取得してみます。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="control"> <div> screenX: <span id="screenX"></span> screenY: <span id="screenY"></span> </div> <div> pageX: <span id="pageX"></span> pageY: <span id="pageY"></span> </div> <div> clientX: <span id="clientX"></span> clientY: <span id="clientY"></span> </div> <div> offsetX: <span id="offsetX"></span> offsetY: <span id="offsetY"></span> </div></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { $(window).on('mousemove', function(e) { $('#screenX').text(e.screenX); $('#screenY').text(e.screenY); $('#pageX').text(e.pageX); $('#pageY').text(e.pageY); $('#clientX').text(e.clientX); $('#clientY').text(e.clientY); $('#offsetX').text(e.offsetX); $('#offsetY').text(e.offsetY); });}); |
カーソルの位置を取得するデモページ
それぞれで取得できる内容は以下の通りです。
| screenX/screenY | スクリーン(モニター)上の座標を取得。 |
|---|---|
| pageX/pageY | 表示しているページの左上からの座標を取得。 |
| clientX/clientY | 現在ブラウザで表示している領域の左上からの座標を取得。 |
| offsetX/offsetY | 要素内の座標を取得。 |
pageX/pageYとclientX/clientYの違いが少しわかりにくいですが、デモページを下にスクロールすると、pageYとclientYの値が異なるのが分かるかと思います。
offsetX/offsetYの対象は要素になるので、このデモの場合はpageX/pageYと同じ結果になります。
先ほどのデモではwindowを対象にしましたが、次は特定の要素を対象にしてみます。
HTML
1 | <div class="box"></div> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { $('.box').on('mousemove', function(e) { $('#screenX').text(e.screenX); $('#screenY').text(e.screenY); $('#pageX').text(e.pageX); $('#pageY').text(e.pageY); $('#clientX').text(e.clientX); $('#clientY').text(e.clientY); $('#offsetX').text(e.offsetX); $('#offsetY').text(e.offsetY); });}); |
offsetX/offsetYが.boxの左上からの座標になっているのが確認できました。
カーソルの位置を取得するデモページ2
【参考サイト】
コメントが承認されるまで時間がかかります。