Touch: clientY 屬性

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

Touch.clientY 只讀屬性返回觸控點相對於瀏覽器視口的 Y 座標,不包括任何滾動偏移。

一個浮點值(double),表示觸控點相對於視口的 Y 座標,不包括任何滾動偏移。

示例

此示例演示如何使用 Touch 物件的 Touch.clientXTouch.clientY 屬性。Touch.clientX 屬性是觸控點相對於瀏覽器視口的水平座標,不包括任何滾動偏移。Touch.clientY 屬性是觸控點相對於瀏覽器視口的垂直座標,不包括任何滾動偏移。

在此示例中,我們假設使用者在 ID 為 source 的元素上開始觸控,在元素內或元素外移動,然後釋放接觸表面。當 touchend 事件處理程式被呼叫時,會計算從起始觸控點到結束觸控點 Touch.clientXTouch.clientY 座標的變化。

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

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

src.addEventListener("touchend", (e) => {
  let deltaX;
  let 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…
});

規範

規範
觸控事件
# dom-touch-clienty

瀏覽器相容性