トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ マウスイベントの取得

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

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

◆ 実行サンプル

このページの好きな場所をダブルクリックしてください。

マウスの座標: x = y =

略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「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>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom