JavaScript マウスの位置情報について

カテゴリ: JavaScript, jQuery

記事投稿日: 2013年3月29日



横方向のX座標と、縦方向のY座標がありますが、
いくつか取得方法があり、性質がそれぞれ異なる上、
ブラウザによっては使えないものもあります。
以下はその見取り図です。

  IE Firefox Safari Opera
x,y X
pageX,Y X
layerX,Y X X
clientX,Y
screenX,Y
pageXOffset,Y X
offsetX,offsetY X

それぞれの使い方を見ていきます。

・ドキュメント内の相対座用を示す
(スクロールしても変わらない)
pageX
pageY

・表示されているウィンドウ内の座標を示す。
(スクロールすると変わる)
clientX
clientY

・PC等の表示している端末上の座標の絶対位置
(この情報はIE、FF、Safari、Operaで共通)
screenX
screenY

・イベントが発生した要素内の座標
offsetX
offsetY

CANVASを使ってHTML5の機能を使うのなら、
IEがほとんど対応していないので
pageX pageY を使うのが一番楽です。
ただ、CANVASの位置を引く必要があります。

var can = document.getElementById("myCanvas");
canvas_x = can.offsetLeft;
canvas_y = can.offsetTop;
var x = e.pageX - canvas_x;
var y = e.pageY - canvas_y;

これでCANVASがどの位置にあろうと、
マウスの位置は取得できます。








コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA




トップに戻る