jQuery API の event.pageX は、イベント発生時に、ドキュメントの左端を基準にしたカーソル位置(X座標)を格納するプロパティ。
実装例(サンプル)
pageX:
pageY:
実装例(サンプル)の動作について
黄色のボックス内でカーソルを動かすと、「pageX: 」の右に、カーソル位置のX座標を表示、「pageY: 」の右に、カーソル位置のY座標を表示する。
実装例(サンプル)のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousemove' ) . mousemove( function( event ) {
jQuery( '#jquery-api-mousemove-pageX' ) . text( event . pageX );
jQuery( '#jquery-api-mousemove-pageY' ) . text( event . pageY );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-mousemove' ) . mousemove( function( event ) {
jQuery( '#jquery-api-mousemove-pageX' ) . text( event . pageX );
jQuery( '#jquery-api-mousemove-pageY' ) . text( event . 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>