MouseEvent: pageX プロパティ

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

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

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

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

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 は以下の通りです。

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

JavaScript

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> 要素の内容を pageX と pageY の値で置き換えます。

結果

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

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

• MouseEvent.pageY