更新日: 2014年12月16日
開発記録

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

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

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

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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

— 以下に情報表示 —

確認ツールの jQuery コード

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

$(window).mousemove( function(evt) {
  var client_pos = "clientX: " + evt.clientX + " / " + "clientY: " + evt.clientY + "<br />";
  var page_pos = "pageX: " + evt.pageX + " / " + "pageY: " + evt.pageY + "<br />";
  var offset_pos = "offsetX: " + evt.offsetX + " / " + "offsetY: " + evt.offsetY + "<br />";
  var screen_pos = "screenX: " + evt.screenX + " / " + "screenY: " + evt.screenY + "<br />";
  var window_size = "window width: " + $(window).width() + " / " + "window height: " + $(window).height() + "<br />";
  var document_size = "document width: " + $(document).width() + " / " + "document height: " + $(document).height() + "<br />";
  var info = client_pos + page_pos + offset_pos + screen_pos + window_size + document_size;
  $("#size-pos-info").html(info);
});

$(window).mousemove( function(evt) {

var client_pos = "clientX: " + evt.clientX + " / " + "clientY: " + evt.clientY + " ";

var page_pos = "pageX: " + evt.pageX + " / " + "pageY: " + evt.pageY + " ";

var offset_pos = "offsetX: " + evt.offsetX + " / " + "offsetY: " + evt.offsetY + " ";

var screen_pos = "screenX: " + evt.screenX + " / " + "screenY: " + evt.screenY + " ";

var window_size = "window width: " + $(window).width() + " / " + "window height: " + $(window).height() + " ";

var document_size = "document width: " + $(document).width() + " / " + "document height: " + $(document).height() + " ";

var info = client_pos + page_pos + offset_pos + screen_pos + window_size + document_size;

$("#size-pos-info").html(info);

});

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

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 と同等の計算方法。

Rails と Swift はぜひ押さえておきたいです。

本気ではじめるiPhoneアプリ作り Xcode 7.x+Swift 2.x対応黒帯エンジニアがしっかり教える基本テクニック (ヤフー黒帯シリーズ)

パーフェクト Ruby on Rails

>> 次の記事 : ImagictでBingoされた英単語をつぶやくTwitter botを作成しました

<< 前の記事 : JavaScriptでcollapsed rangeオブジェクトを可視化するツールを作った

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

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

確認ツールの jQuery コード

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

Leave Your Message! コメントをキャンセル