Touch: clientY Eigenschaft

Wert

Ein double Gleitkommawert, der die Y-Koordinate des Berührungspunkts relativ zum Viewport darstellt, ohne Berücksichtigung eines Bildlaufversatzes.

Beispiele

Dieses Beispiel veranschaulicht die Verwendung der Eigenschaften Touch des Objekts Touch.clientX und Touch.clientY. Die Eigenschaft Touch.clientX ist die horizontale Koordinate eines Berührungspunkts relativ zum Viewport des Browsers ohne Berücksichtigung eines Bildlaufversatzes. Die Touch.clientY-Eigenschaft ist die vertikale Koordinate des Berührungspunkts relativ zum Viewport des Browsers ohne Berücksichtigung eines Bildlaufversatzes.

In diesem Beispiel gehen wir davon aus, dass der Nutzer eine Berührung auf einem Element mit der ID source initiiert, sich innerhalb des Elements oder aus dem Element heraus bewegt und dann den Kontakt mit der Oberfläche beendet. Wenn der touchend Ereignishandler aufgerufen wird, werden die Änderungen in den Koordinaten Touch.clientX und Touch.clientY vom startenden Berührungspunkt bis zum endenden Berührungspunkt berechnet.

// 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…
});

Spezifikationen

Browser-Kompatibilität