マウスイベントに応答する
今回はＤＨＴＭＬの機能としておなじみの＜ＤＩＶ＞タグを使ってマウスに追随して移動するサンプルを造ってみましょう。
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=x-sjis">
<title>DHTMLサンプル</title>
<script language="JavaScript">
<!--
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=m_d;
}
function m_d(e){
if (document.all){
document.all("mov").style.left=event.clientX+5;
document.all("mov").style.top=event.clientY+5;
}
if (document.layers){
document.layers["mov"].left=e.pageX+5;
document.layers["mov"].top=e.pageY+5;
}
}
//-->
</script>
</head>
<body onmousemove="m_d()">
<div id="mov" style="position:absolute;left:0;top:0;z-index:2;width:100;height:100">
この文字列がマウスにくっつきます。うっとおしいですね。
</div>
<div id="fi" style="position:absolute;top:100;left:100;z-index:1;width:100;height:100">
<a href="dhtml4.htm">戻る</a>
</div>
<script language="JavaScript">
<!--
//-->
</script>
</body>
解説
ＩＥとＮＮでイベント取得の方法が全く違うのでクロスブラウザを実現するのに苦労しています。
ＩＥの場合、<body onmousemove="関数">で、マウスイベントに応答できます。
マウスの座標はclientX、clientYです。
ＮＮの場合はcaptureEventsメソッドを使います。captureEvents(Event.MOUSEMOVE)でマウスｍｏｖｅ
イベントに応答できます。
イベントの検出を止めるにはreleaseEventsメソッドを使います。releaseEvents(Event.MOUSEMOVE)の
ように使います。マウスの座標はpageX、pageYです。
次回もサンプルを紹介したいと思います。
back／next