JavaScript で現在のマウスカーソル座標を取得する
SPECIAL
現在のマウスカーソル座標を取得する
JavaScript を用いてマウスカーソルの座標を取得する場合、ブラウザの違いを加味したスクリプトが必要になってくるようでした。
調べてみるといろいろ方法があるようですけど、個人的には次の関数を使用してみています。見た目がとてもシンプルですし、試した範囲（Internet Explorer 8, Firefox 3.5.5 や Safari 4.0.3 、Google Chrome 3.0）では意図したとおりに動作しています。
なお、try ... catch による例外処理のコードが書かれていますけど、これは念のため、ブラウザによって例外となった際にそれ以降のスクリプト停止を避けるために付加してみたためです。
var mousePositionX = 0;
var mousePositionY = 0;
function getMousePosition(e)
{
try
{
mousePositionX = (e ? e.pageX : document.body.scrollLeft + event.x);
mousePositionY = (e ? e.pageY : document.body.scrollTop + event.y);
}
catch (error)
{
mousePositionX = 0;
mousePositionY = 0;
}
}
この関数を、目的のオブジェクトの onmousemove や onmousedown といった、マウス関連のイベント関数として設定すれば完了です。
後は、そのイベントが発生すると、予め宣言しておいた大域変数 mousePositionX と mousePositionY の値として、現在のマウスカーソルの座標が設定されるようになります。
ちなみに、HTML ページ内の全体でマウスカーソルの座標を取得したい場合には、以下のように、document オブジェクトの onmousemove イベントとして割り当てます。
document.onmousemove = getMousePosition;