備忘録的プログラミングリファレンス

clientX プロパティ

event.clientX

 clientX プロパティは、ポインターの X 軸方向(水平方向)の座標を返すEventのプロパティです。ウィンドウの表示エリアの左上端が始点(0,0)になります。

 ポインターに関するイベントは以下のポインターに関連するイベントを参照してください。

clientX プロパティ
document.getElementById("example").addEventListener("pointermove", (event)=>{
	console.log( event.clientX );
});
詳しくはExampleを参照してください

 ポインターの座標の値には、座標の基準によって異なるプロパティがあります。詳しくは以下の座標の取得を参照してください。

 X 軸方向の座標を取得するには clientX プロパティを使用します。

ページ内 Index

- ad -

座標の取得

 座標の取得には以下の4つの方法があります。

スクリーンデバイスの左上端event.screenXevent.screenY
ウィンドウの表示エリアの左上端event.clientXevent.clientY
ドキュメントの左上端event.pageXevent.pageY
エレメントの左上端event.offsetX、event.offsetY

構文(Syntax)

返り値はNumber型、読み取り専用です。

Number = event.clientX;

戻り値(Return Values)

Value摘要
Numberマウスポインタの水平座標(ピクセル単位)

Example

 clientX プロパティの例です。

 clientX プロパティの基準はウィンドウの表示領域の左上端になります。
 以下の例では <iframe> によって別ウィンドウが表示されています。 <iframe> の表示領域の左上端が基準( 0, 0 )になります。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

- ad -