jQuery API の mousemove( fn ) は、マウスムーブイベントにイベントハンドラをバインドしたいときに便利なメソッドだ。
要素内でカーソルを動かす度に、mousemove( fn ) の引数に指定したイベントハンドラを呼び出すことができる。
記述方法
jQuery( セレクター ) . mousemove( イベンドハンドラ );
「セレクター」の要素のマウスムーブイベントに、「イベンドハンドラ」をバインド。
実装例（サンプル）
pageX:
pageY:
実装例（サンプル）の動作について
黄色のボックス内でカーソルを動かすと、「pageX: 」の右に、カーソル位置のX座標を表示、「pageY: 」の右に、カーソル位置のY座標を表示する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousemove' ) . mousemove( function( e ) {
jQuery( '#jquery-api-mousemove-pageX' ) . text( e . pageX );
jQuery( '#jquery-api-mousemove-pageY' ) . text( e . pageY );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousemove' ) . mousemove( function( e ) {
jQuery( '#jquery-api-mousemove-pageX' ) . text( e . pageX );
jQuery( '#jquery-api-mousemove-pageY' ) . text( e . pageY );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-mousemove {
width: 100%;
height: 200px;
background-color: yellow;
}
-->
</style>
<!--
#jquery-api-mousemove {
width: 100%;
height: 200px;
background-color: yellow;
}
-->
</style>
HTML
<p>pageX: <span id="jquery-api-mousemove-pageX"></span></p>
<p>pageY: <span id="jquery-api-mousemove-pageY"></span></p>
<div id="jquery-api-mousemove"></div>
<p>pageY: <span id="jquery-api-mousemove-pageY"></span></p>
<div id="jquery-api-mousemove"></div>