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