参考に上記 p の要素に記述したonmousemove="p1_mouseMove()" のp1_mouseMove関数の定義を以下に示します。
function p1_mouseMove(){ var userAgent = window.navigator.userAgent.toLowerCase(); if (userAgent.indexOf("firefox") > -1) { event = arguments.callee.caller.arguments[0]; } document.frm1.txtOffsetX.value=event.offsetX;//イベント発生要素内の座標 document.frm1.txtOffsetY.value=event.offsetY; document.frm1.txtClentX.value=event.clientX;//ブラウザ内のクライアント領域(フレームの内側での座標) document.frm1.txtX.value=event.x; document.frm1.txtClentY.value=event.clientY; document.frm1.txtY.value=event.y; document.frm1.txtPageX.value=event.pageX;// ページ内座標 document.frm1.txtPageY.value=event.pageY; document.frm1.txtScreenX.value=event.screenX;//スクリーン上のX座標 document.frm1.txtScreenY.value=event.screenY; document.frm1.txtscrollTop.value=document.documentElement.scrollTop + document.body.scrollTop; document.frm1.txtscrollLeft.value=document.documentElement.scrollLeft; }
参考で、このMouseMoveイベントを使った、画像内の座標を確認する作品を ここに 紹介します。
なお、上記のように、IE(Operaも)のイベントモデルには、最後に生じたイベントをキャプチャーするwindow.eventという属性があり、
これはどこからでも自由にアクセスすることが出来ます。
対して、FireFoxでのイベントは、イベントハンドラーに引数として渡されるので、それを受け取るようにメソッドを作ります。
例えば、次のように作る方法です。
function p1_mouseMove(event){ document.frm1.txtClentX.value=event.clientX; } document.getElementById("p1").onmousedown = p1_mouseMove;
function mouse_move_sub (itEvent){ var ver = navigator.appVersion.toLowerCase(); var ie_ver = ""; if(ver.indexOf('msie') != -1){// IE ? ie_ver = parseInt(ver.replace(/.*msie[ ]/,'').match(/^[0-9]+/));//バージョン番号取得 if(ie_ver <= 8) itEvent = event; //IE8以前 }//以上までが IE8対応処理 var mx = itEvent.clientX;//ブラウザクライアント領域内x座標を得る var my = itEvent.clientY;//ブラウザクライアント領域内y座標を得る document.getElementById("verMsg")innerHTML=mx + "," + my + "の座標で" + ver + "のバージョン:" + ie_ver; }
mouse_event_proc=function (itEvent){ /* getBoundingClientRectが使える前の手法 var itX = this.offsetLeft;//左からの位置を得る。 var mx = itEvent.clientX-itX;//相対座標を得る //(上記では、offsetXに相当する値であるがFireFoxが使えないので相当する情報を算術している) mx += document.documentElement.scrollLeft + document.body.scrollLeft;//ページがスクロールされている場合にも対応させる。 var itY = this.offsetTop;//要素のページ上からの位置を得る。 var my = itEvent.clientY-itY; my += document.documentElement.scrollTop + document.body.scrollTop;//ページがスクロールされている場合にも対応させる。 */ var rect = イベントの発生element元.getBoundingClientRect (); mouseX=itEvent.clientX - rect.left;//element内のマウス位置x mouseY=itEvent.clientY - rect.top;//element内のマウス位置y }
function mousemove(e) { alert(e.srcElement.className); }タグ名はtagNameプロパティで取得することができ、上記はそれを確認する例です。