ホーム >> 左脳Script >> Java Script >> 座標取得

座標取得


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;
    };
}

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

IEでは、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)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/48

再び座標取得の話。">前回同様の内容で記事を書いたのが随分前だったように思いますが、あの時点で既に古い情報だったのかもしれません。 さて、今まで上手く動い... 続きを読む

コメントする

ホーム >> 左脳Script >> Java Script >> 座標取得

アーカイブ

このブログ記事について

このページは、n-yagiが2009年5月11日 20:40に書いたブログ記事です。

ひとつ前のブログ記事は「TextFieldAutoSize ~オートコンプリートとのすれ違いの果てに」です。

次のブログ記事は「逃げるリンク」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。