■ マウスイベントの取得

マウスのイベントとしてダブルクリックした場合のイベントを取得し、特定の処理を実行させます。

イベント発生時に現在のマウスポインタの座標を取得し、それを指定したフォームで表示します。

◆ 実行サンプル

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「mevent.js」というファイル名で保存します。
Wx = -1; Wy = -1; spannam1="span1"; if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = m_pos; function m_pos(event0) { if (navigator.appName.charAt(0)=="M") { Et =event.type; Sx =event.screenX; Sy =event.screenY; Wx = document.body.scrollLeft+event.clientX; Wy = document.body.scrollTop+event.clientY; } if (navigator.appName.charAt(0)=="N") { Et =event0.type; Sx =event0.screenX; Sy =event0.screenY; Wx =event0.pageX; Wy =event0.pageY; } txt0=""; txt0+="マウスの座標"; txt0+=" : X = "+Wx; txt0+=" : Y = "+Wy; if (navigator.appName.charAt(0)=="M") { document.all[spannam1].innerText = txt0; } if (navigator.appName.charAt(0)=="N") { document.layers[spannam1].document.open("text/html"); document.layers[spannam1].document.write(txt0.bold()); document.layers[spannam1].document.close(); document.layers[spannam1].document.fgColor = "red"; document.layers[spannam1].document.bgColor = "yellow"; } document.form1.xbox.value = Wx; document.form1.ybox.value = Wy; }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。
<script type="text/javascript" src="mevent.js"></script>

ダブルクリックしたときのイベント情報を取得するためのタグはこのサンプルの場合次のように記述しています。
<form name="form1">
<br>
マウスの座標:
x = <input type="text" size="4" name="xbox">
y = <input type="text" size="4" name="ybox">
</form>
<br>
<div style="position:absolute; visibility: hidden;" id="span1">←マウスをダブルクリックした位置</div>