DOM

：

：

MouseEvent.clientX プロパティ

　編集：2022.10.06 by T.A.

[Edge]○。読取専用。、、

MouseEvent 発行時点にページの表示内容領域の左端からのポインターの水平位置を数値で示します。

mdn： …アプリケーションのにおける水平座標を定義します¶（ページにおける座標ではありません）。

mdn： 例えば、ビューポートの左端をクリックすると、そのページが水平方向にスクロールしているかどうかにかかわらず、常に clientX の値が 0 のマウス イベントが発生します。

構文
MouseEvent.clientX
値

double の浮動小数点値です。

関連

clientY。

例
clientX、clientY

HTML： 

<SPAN id=IdTest style="cursor:default">[SPAN要素。ここでクリック…]</SPAN><BR>
<TABLE id=IdTest2 style="border:3px outset #eee; border-spacing:5px; cursor:default">
 <TR><TD style="border:3px solid #888; padding:10px;">[TD要素
  <SPAN style="border:5px solid red;">[SPAN要素]</SPAN>
 ]
</TABLE>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){ //click イベントの処理：
  D=eve;
  let E=eve.target; //イベントが起きた要素を取得。
  IdLog.innerHTML=E.tagName +"："+ eve.clientX +", "+ eve.clientY; //表示。
}
IdTest.onclick=Job; //イベント割り当て。

ビューポート：表示されている枠の内容領域？。

テスト