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;
エレメントの座標が欲しい場合は、以下のように 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 で何故か動かない、という現状から、今回は追及しません。
コメントする