DOM

MouseEvent.pageX プロパティ

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

MouseEvent 発行時のマウス ポインターの X（水平）座標を、文書全体の左端からの相対座標を数値で返します。

mdn： マウスがクリックされた位置の X（水平）座標を、文書全体の左端からの相対座標で返します。これには文書の現在見えていない範囲にあるものも含みます。

mdn： 文書の端をそのまま基準とするため、このプロパティは、ページの水平方向のスクロールを加味します。例えば、文書の左側 200 ピクセルが隠れるようにページがスクロールされ、ビューの左端から 100 ピクセル内側でマウスがクリックされた場合、pageX が返す値は 300 となります。

mdn： 元々、このプロパティは long 型の整数として定義されていましたが、 では、double 型の浮動小数点値として再定義しています。詳しくはブラウザーの互換性の節を参照してください。

mdn： この方法で指定された座標について詳しくは、のの節を参照してください。

構文

値

当該文書の左端からのピクセル数を表す浮動小数点値。

mdn： マウスがクリックされた文書の左端からのピクセル数を示す浮動小数点値。スクロールやビューポートによる位置決めはが有効であるかに関わらず。

mdn： このプロパティは、もともと Touch Events 仕様では long 型の整数として規定されていましたが、CSSOM View モジュールではサブピクセルの精度が利用できるようにするために倍精度浮動小数点数として再定義されました。JavaScript では数値型はどちらも Number 型で表現されますが、ブラウザーのコード内部では異なる扱いを受ける可能性があり、結果として動作に差異が生じる可能性があります。

mdn： どのブラウザーが改訂されたデータ型を使用するように更新されているかはブラウザーの互換性を参照してください。

関連

pageY。

例

pageX、pageY

<SPAN id=IdTest style="border:5px solid red; cursor:default">[SPAN要素。ここでクリック…]</SPAN><BR>
<TABLE id=IdTest2 style="border:10px solid #000; 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>

function Job(eve){ //mousemove イベントの処理。
  D=eve;
  let E=eve.target; //イベントが起きた要素の取得。
  IdLog.innerHTML="E："+ E.tagName +"<BR>" //表示。
	+"eve.pageX："+ eve.pageX +"<BR>"
	+"eve.pageY："+ eve.pageY +"<BR>";
}
IdTest.onmousemove=Job;
IdTest2.onmousemove=Job;

テスト