プロパティ event.clientX
プロパティ event.clientXは、マウスカーソルのX軸座標を含みます。
座標を取得するためのプロパティには他に、
event.clientY、
event.pageX、
event.pageYがあります。
clientX/clientYとpageX/pageYの違いを見てみましょう。
clientXとclientYの動作：
ウィンドウサイズが1000×1000ピクセルで、マウスが中央にある場合、clientXとclientYはどちらも500になります。
その後、カーソルを動かさずにページを水平または垂直にスクロールしても、これらの値は変わりません。これらはドキュメントではなくウィンドウを基準として計測されるからです。
pageXとpageYの動作：
ウィンドウサイズが1000×1000ピクセルで、カーソルが中央にある場合、pageXとpageYは500になります。
その後、ページを250ピクセル下にスクロールすると、pageYは750になります。
このように、pageXとpageYはスクロールを考慮したイベント座標を含みます。
構文
event.clientX;
例
ページ上でマウスを動かした際に、ブラウザウィンドウを基準とした座標（clientXとclientY）を出力します：
<div id="elem">0 : 0</div>
let elem = document.getElementById('elem');
document.addEventListener('mousemove', function(event) {
elem.innerHTML = event.clientX + ' : ' + event.clientY;
});
:
