Touch: pageX プロパティ

Touch.pageX は読み取り専用プロパティで、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を返します。

値

double 型の浮動小数点数で、スクロールオフセットを加味した、ビューポートに対するタッチ点の X 座標を表します。

例

この例では、 Touch オブジェクトの Touch.pageX および Touch.pageY プロパティへのアクセス方法を示しています。 Touch.pageX プロパティは、ビューポートを基準としたタッチ点の水平座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。 Touch.pageY プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標（CSS ピクセル単位）で、スクロールオフセットを加味したものです。

以下の単純なコードスニペットでは、ユーザーが source 要素に 1 つ以上のタッチ接触を開始し、タッチ点を移動させた後、表面との接触をすべて解除することを想定しています。 touchmove イベントハンドラーが呼び出されると、各タッチ点の Touch.pageX と Touch.pageY の各座標がイベントの TouchEvent.changedTouches リスト経由でアクセスされます。

js
// 'source' 要素に touchmove リスナーを登録する
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // 移動されたタッチ点を反復処理し、各 pageX/Y 座標をログ出力する。
    // 各座標は CSS ピクセル単位。
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);

仕様書

Specification
Touch Events
# dom-touch-pagex

ブラウザーの互換性

BCD tables only load in the browser