参考に上記 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プロパティで取得することができ、上記はそれを確認する例です。