event.pageX

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>

CSS

<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>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベント・オブジェクト パーマリンク