Touch: clientY プロパティ

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

構文

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

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

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

js
// 要素 '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-clienty

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clientY

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.