Touch: clientX プロパティ

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

値

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

この例では、 Touch オブジェクトの Touch.clientX および Touch.clientY プロパティを使用しています。 Touch.clientX プロパティは、ブラウザーのビューポートを基準としたタッチ点の水平座標で、スクロールオフセットを除いたものです。 Touch.clientY プロパティは、ブラウザーのビューポートを基準としたタッチ点の垂直座標で、スクロールオフセットを除いたものです。

この例では、 source という id の要素にタッチを開始し、要素内または要素外に移動した後、タッチ面から指を離したと仮定します。 touchend のイベントハンドラーが呼び出されると、タッチ開始点から終了点までの Touch.clientX 座標と Touch.clientY 座標の変化が計算されます。

// 要素 'source' に touchstart リスナーと touchend リスナーを登録
const src = document.getElementById("source");
let clientX;
let clientY;

src.addEventListener(
  "touchstart",
  (e) => {
    // クライアント X/Y 座標をキャッシュ
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  (e) => {
    let deltaX;
    let deltaY;

    // X 座標と Y 座標の変化を計算
    // changedTouches リストの最初のタッチ点は、
    // 面から除去されたタッチ点です。
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // データを処理…
  },
  false,
);

仕様書

Specification
Touch Events # dom-touch-clientx

ブラウザーの互換性

BCD tables only load in the browser