jQuery(JavaScript)でマウス座標やウィンドウサイズを取得して確認するツール

jQuery(JavaScript)でマウス座標やウィンドウ・ページのサイズを取得する方法はいくつかあって、いつも使う度に混乱するので視覚的にすぐ確認できるツールを作りました。

— 動作確認 —
Firefox, Google Chrome でのみ動作確認。

スポンサーリンク

マウス座標/ウィンドウ・ページのサイズ確認ツール

このページ内で適当にマウスを動かすと、以下に座標やサイズの取得情報が表示されます。各々の取得値の違いを実感するために、ブラウザのウィンドウサイズを小さくした後、下側に移動させて確認すると分かりやすいです。
(※ Firefox では offsetX, offsetY は undefined になる模様)

— 以下に情報表示 —


確認ツールの jQuery コード

マウス(マウスカーソル)の座標関連は、jQuery で mousemove の event で取得しています。ウィンドウ(window)やページ(document)のサイズは、jQuery の $(obj).width() / $(obj).height() で取得している。obj に window または document を指定して違いを確認しています。

各々の取得方法による違い

event.clientX / event.clientY
ウィンドウ内でのマウス座標を取得する。ウィンドウの左上が常に (0, 0) の座標となる。

event.pageX / event.pageY
ページ全体でのマウスの位置座標を取得する。ページの左上が常に (0, 0) 座標となる。ページをスクロールさせると、pageX, pageY は clientX, clientY よりも大きい値になります。

event.offsetX / event.offsetY
要素内でのマウス座標を取得する。

event.screenX / event.screenY
スクリーン(モニタ・ディスプレイ)全体でのマウス座標を取得する。ディスプレイの左上が常に (0, 0) 座標となる

$(window).width() / $(window).height()
ウィンドウの幅と高さを取得する。event.clientX, event.clientY と同等の計算方法。

$(document).width() / $(document).height()
ページ全体の幅と高さを取得する。event.pageX, event.pageY と同等の計算方法。

スポンサーリンク
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!