Touch.clientY

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

構文

touchItem.clientY;

返値

long 値で、タッチ点のビューポートからのスクロールオフセットは含まない相対 Y 座標を表します。

例

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

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

js

// Register touchstart and touchend listeners for element 'source'
var src = document.getElementById("source");
var clientX, clientY;

src.addEventListener(
  "touchstart",
  function (e) {
    // Cache the client X/Y coordinates
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  function (e) {
    var deltaX, deltaY;

    // Compute the change in X and Y coordinates.
    // The first touch point in the changedTouches
    // list is the touch point that was just removed from the surface.
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // Process the data ...
  },
  false,
);

仕様書

Specification
Touch Events
# dom-touch-clienty

ブラウザーの互換性

BCD tables only load in the browser