座標取得

Java Script でマウスの位置を取得するには、基本 document. onMouseMove にイベント処理を設定するコトがセオリーです。

マウス座標の取得はそれほど難しくありませんが、ブラウザーの種類によって座標を取得するプロパティが異なるので注意。

以下は、マウスの座標を変数 mouseX、mouseY にリアルタイムで設定するコードです。


//  マウス座標用の関数登録
var mouseX,mouseY;
if( window.createPopup  )
{
    document.onmousemove    =   function(e)
    {
        mouseX  =   document.body.scrollLeft    +   event.clientX;
        mouseY  =   document.body.scrollTop     +   event.clientY;
    };
}
else
{
    document.onmousemove    =   function(e)
    {
        mouseX  =   e.pageX;
        mouseY  =   e.pageY;
    };
}

マウスの座標はこれで、かなりのブラウザ差異を吸収出来ます。

ＩＥでは、event.x、event.y でマウスの座標が取れますが、エレメント上での相対座標になってしまう場合があります。その為、event.clientX、event.clientYで直接ブラウザ内の座標の指定取得をする必要があります。

マウスの座標は比較的簡単ですが、ページ内のエレメントの座標を知りたい・・・となると、マウス座標ほど一般的じゃないんですね。何故か。


var element = document.getElementById(idName);
var ex = element.style.left;
var ey = element.style.top;

一見、このように書けば座標取得できそうですが、これはエレメントの状態によって意味が変わるので汎用的ではありません。（style.position が absolite でないと意味がない。）

エレメントの座標が欲しい場合は、以下のように offset～ を使うのが一般的なようです。


var element = document.getElementById(idName);
var ex = element.offsetLeft;
var ey = element.offsetTop;

ところが、スタイルの float などで複雑？にレイアウトされている場合、正確な値が取得できないことがあります。

ブラウザのクライアント領域内での、いわゆる絶対座標が欲しくて仕方ない場合は、取得したいエレメントから親を辿って座標を求めなければならないようです。


var element = document.getElementById(idName);
var x = 0;
var y = 0;
while(element)
{
 x += element.offsetLeft;
 y += element.offsetTop;
 element = element.offsetParent;
}

およそ正しい値を取ることが出来ます。"およそ"と言っているのは、ブラウザ毎に微妙に差が出たり、実際の座標から微妙にずれたりする事がある為です。

また、getBoundingClientRect を使うともっと簡単に座標を取得できるようですが・・・
比較的新しいメソッドなようで、fire fox では 3 以降の対応、Google Chrome で何故か動かない、という現状から、今回は追及しません。

カテゴリ:

タグ:

関連記事:

トラックバック(1)

コメントする

検索

カテゴリ

このブログ記事について