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

clientY プロパティ

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

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

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

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

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

ページ内 Index

座標の取得

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

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

構文(Syntax)

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

Number = event.clientY;

戻り値(Return Values)

type摘要
Numberマウスポインタの垂直座標(ピクセル単位)

Example

 clientY プロパティの例です。

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

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

ポインターに関連するイベント

 以下はポインターに関連するイベントです。

ポインティングデバイス
イベント概要
gotpointercapture ( ongotpointercapture )ポインターイベントのキャプチャー対象に設定されたら
lostpointercapture ( onlostpointercapture )ポインターイベントのキャプチャー対象から外れたら
pointercancel ( onpointercancel )ポインターによるイベントが発生しないとなったとき
pointerdown ( onpointerdown )ポインターは押されたら
pointerenter ( onpointerenter )ポインターが領域上に入ったら
pointerleave ( onpointerleave )ポインターが領域上から離れたら
pointermove ( onpointermove )ポインターが移動したら
pointerout ( onpointerout )ポインターが反応条件から離れたら
pointerover ( onpointerover )ポインターが領域内に入ったら
pointerup ( onpointerup )ポインターがアクティブでなくなったら