MouseEvent: pageX プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

pageXMouseEvent インターフェイスの読み取り専用プロパティで、マウスがクリックされた位置の X(水平)座標を、文書全体の左端からの相対座標で返します。 これには文書の現在見えていない範囲にあるものも含みます。

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

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

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

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

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

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

ページ原点に対するマウスの位置を表示

それでは、ページの原点に対するマウスの位置を示す簡単な例を見てみましょう。 この例は <iframe> の中で表示されているので、その左上隅はブラウザーウィンドウではなく、フレームの左上隅になります。

HTML

html
<div class="box">
  <p>このボックス内でマウスを動かして、座標の変化を確認してください。</p>
  <p><code>pageX</code>: <span id="x">n/a</span></p>
  <p><code>pageY</code>: <span id="y">n/a</span></p>
</div>

HTML は単純です。マウスイベントを監視するボックスには "box" クラスが設定されています。 ここには 2 つの <span> 要素があり、一つは ID が "x" で、もう一つは ID が "y" です。 これらはイベントが発生するたびに、ページに対するマウスの最新座標で更新されます。

CSS

この例で使用される CSS は以下の通りです。

css
.box {
  width: 400px;
  height: 250px;
  border: 2px solid darkblue;
  background-color: blue;
  color: white;
  font:
    16px "Zilla",
    "Open Sans",
    "Helvetica",
    "Arial",
    sans-serif;
}

JavaScript

js
const box = document.querySelector(".box");
const pageX = document.getElementById("x");
const pageY = document.getElementById("y");

function updateDisplay(event) {
  pageX.innerText = event.pageX;
  pageY.innerText = event.pageY;
}

box.addEventListener("mousemove", updateDisplay, false);
box.addEventListener("mouseenter", updateDisplay, false);
box.addEventListener("mouseleave", updateDisplay, false);

JavaScript では、 addEventListener() を使用して、 updateDisplay() 関数を mousemove, mouseenter, mouseleave の各イベントのイベントハンドラーとして登録しています。

updateDisplay() は、 X と Y の座標を格納するための <span> 要素の内容を pageXpageY の値で置き換えます。

結果

こちらで試してみてください。

その他の例

利用可能なすべての座標系における情報を示す例は、マウス位置へのアクセス方法で見ることができます。

仕様書

Specification
CSSOM View Module
# dom-mouseevent-pagex

ブラウザーの互換性

BCD tables only load in the browser

関連情報