onmousemoveイベント

投稿日: 2013年9月19日 作成者: alphasis

onmousemoveイベント（マウスムーブイベント）とは、マウスのポインタ（カーソル）を移動させている時のイベント。

構文

HTML

<element onmousemove="イベントハンドラ">

例

ボタン要素
<button onmousemove="イベントハンドラ">ボタン</button>
DIV要素
<div onmousemove="イベントハンドラ">DIV項目</div>

JavaScript

object.onmousemove = function(){ イベントハンドラ };

サンプル１

HTMLドキュメント上でイベントハンドラを登録するサンプル。

Ｘ座標：

Ｙ座標：

サンプル１の動作について

  1. 黄色いボックス要素の上でマウスのポインタ（カーソル）を移動すると、「Ｘ座標：」と「Ｙ座標：」の右横に、マウスのポインタの位置の座標を表示する。
  2. 黄色いボックス要素の上からマウスのポインタを外すと、「Ｘ座標：」と「Ｙ座標：」の右横の数値が消える。

サンプル１のソースコード

JavaScript

<script type="text/javascript">
function sample1getCoordinates( $event ) {
 document.getElementById( "sample1outputX" ).innerHTML = "Ｘ座標：" + $event.clientX;
 document.getElementById( "sample1outputY" ).innerHTML = "Ｙ座標：" + $event.clientY;
}
function sample1clearCoordinates() {
 document.getElementById( "sample1outputX" ).innerHTML = "Ｘ座標：";
 document.getElementById( "sample1outputY" ).innerHTML = "Ｙ座標：";
}
</script>

HTML

<div id="sample1box" onmousemove="sample1getCoordinates(event);" onmouseout="sample1clearCoordinates();"></div>
<p id="sample1outputX">Ｘ座標：</p>
<p id="sample1outputY">Ｙ座標：</p>

CSS

<style>
#sample1box {
 height: 200px;
 width: 300px;
 border: 1px solid gray;
 border-radius: 10px;
 background-color: yellow;
}
</style>

サンプル２

JavaScript上で動的にイベントハンドラを登録するサンプル。

Ｘ座標：

Ｙ座標：

サンプル２の動作について

  1. 黄色いボックス要素の上でマウスのポインタ（カーソル）を移動すると、「Ｘ座標：」と「Ｙ座標：」の右横に、マウスのポインタの位置の座標を表示する。
  2. 黄色いボックス要素の上からマウスのポインタを外すと、「Ｘ座標：」と「Ｙ座標：」の右横の数値が消える。

サンプル２のソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample2box" ).onmousemove = function( event ){
  sample2getCoordinates( event.clientX, event.clientY );
 };
 document.getElementById( "sample2box" ).onmouseout = function(){
  sample2clearCoordinates();
 };
}
function sample2getCoordinates( $arg1, $arg2 ) {
 document.getElementById( "sample2outputX" ).innerHTML = "Ｘ座標：" + $arg1;
 document.getElementById( "sample2outputY" ).innerHTML = "Ｙ座標：" + $arg2;
}
function sample2clearCoordinates() {
 document.getElementById( "sample2outputX" ).innerHTML = "Ｘ座標：";
 document.getElementById( "sample2outputY" ).innerHTML = "Ｙ座標：";
}
</script>

HTML

<div id="sample2box"></div>
<p id="sample2outputX">Ｘ座標：</p>
<p id="sample2outputY">Ｙ座標：</p>

CSS

<style>
#sample2box {
 height: 200px;
 width: 300px;
 border: 1px solid gray;
 border-radius: 10px;
 background-color: yellow;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, マウスイベント, リファレンス パーマリンク