Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

マウスポインタのページ内座標を取得するJavascript。
Opera 9、Safari 1.2、IE 5-7、Firefox 2で確認済み。

• onmouseX:
• onmouseY:

Script

1. function setPosition(){
2. target = document.getElementById('sampleform');
3. window.document.onmousemove = function(e){
4. target.onmouseX.value = getMousePosition(e).x;
5. target.onmouseY.value = getMousePosition(e).y;
6. }
7. }

この関数をOnloadで実行して描写する。座標の取得タイミングは上記では「onmousemove」になっていますが、たとえば「onmousedown」でも可能です。

1. function getMousePosition(e) {
2. var obj = new Object();
3.  
4. if(e) {
5. obj.x = e.pageX;
6. obj.y = e.pageY;
7. }
8. else {
9. obj.x = event.x + document.body.scrollLeft;
10. obj.y = event.y + document.body.scrollTop;
11. }
12.  
13. return obj;
14. }

上記が座標を取得する関数。イベントオブジェクトを取得し、イベントが発生した位置を返している。イベントオブジェクトの振る舞いはブラウザによって異なるので、if文で処理を変えています。

関連項目

• イベントオブジェクトまとめ
• ページサイズやスクロール位置を取得する