clientXプロパティ

clientXプロパティは、マウスイベントが発生したときの、ウィンドウに対するマウスポインタ(カーソル)の位置の水平座標を返すプロパティ。

構文

event.clientX

戻り値

マウスイベントが発生したときの、ウィンドウに対するマウスポインタ(カーソル)の位置の水平座標。

サンプル

水平座標:
垂直座標:

サンプルの動作について

背景色が黄色のボックス要素をクリックすると、

  • ウィンドウに対するマウスポインタの位置の水平座標を、「水平座標:」の右横に表示する。
  • ウィンドウに対するマウスポインタの位置の垂直座標を、「垂直座標:」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
    document.getElementById( "sampleBox" ).onclick = function( $event ){
        sampleFn( $event );
    };
}
var $count = 0;
function sampleFn( $event ) {
    document.getElementById( "sampleOutputX" ).innerHTML = $event.clientX;
    document.getElementById( "sampleOutputY" ).innerHTML = $event.clientY;
}
</script>

HTML

<div id="sampleBox"></div>
<p>
    水平座標:<span id="sampleOutputX" style="margin-left: 10px;"></span>
    <br />
    垂直座標:<span id="sampleOutputY" style="margin-left: 10px;"></span>
</p>

CSS

<style>
#sampleBox {
    width: 300px;
    height: 100px;
    border: 1px solid gray;
    background: yellow;
}
</style>

スポンサード リンク

カテゴリー: DOM, JavaScript, イベント, プロパティ, マウスイベントオブジェクト, リファレンス パーマリンク