Touch: clientY 屬性
Touch.clientY 只讀屬性返回觸控點相對於瀏覽器視口的 Y 座標,不包括任何滾動偏移。
值
一個浮點值(double),表示觸控點相對於視口的 Y 座標,不包括任何滾動偏移。
示例
此示例演示如何使用 Touch 物件的 Touch.clientX 和 Touch.clientY 屬性。Touch.clientX 屬性是觸控點相對於瀏覽器視口的水平座標,不包括任何滾動偏移。Touch.clientY 屬性是觸控點相對於瀏覽器視口的垂直座標,不包括任何滾動偏移。
在此示例中,我們假設使用者在 ID 為 source 的元素上開始觸控,在元素內或元素外移動,然後釋放接觸表面。當 touchend 事件處理程式被呼叫時,會計算從起始觸控點到結束觸控點 Touch.clientX 和 Touch.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 |
瀏覽器相容性
載入中…