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>
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>
<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>
#sampleBox {
width: 300px;
height: 100px;
border: 1px solid gray;
background: yellow;
}
</style>