Touch: clientX-Eigenschaft

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Die nur-lesbare Touch.clientX-Eigenschaft gibt die X-Koordinate des Berührungspunktes relativ zum Ansichtsfenster zurück, ohne jeglichen Scrollversatz einzuschließen.

Wert

Ein double-Fließkommawert, der die X-Koordinate des Berührungspunktes relativ zum Ansichtsfenster darstellt, ohne jeglichen Scrollversatz einzuschließen.

Beispiele

Dieses Beispiel veranschaulicht die Verwendung der Eigenschaften Touch.clientX und Touch.clientY des Touch-Objekts. Die Touch.clientX-Eigenschaft ist die horizontale Koordinate eines Berührungspunktes relativ zum Ansichtsfenster des Browsers, ohne jeden Scrollversatz. Die Touch.clientY-Eigenschaft ist die vertikale Koordinate des Berührungspunktes relativ zum Ansichtsfenster des Browsers, ebenfalls ohne jeden Scrollversatz.

In diesem Beispiel nehmen wir an, dass ein Benutzer eine Berührung auf einem Element mit der ID source initiiert, sich innerhalb des Elements oder aus dem Element herausbewegt und dann den Kontakt mit der Oberfläche beendet. Wenn der touchend-Ereignishandler aufgerufen wird, werden die Änderungen in den Touch.clientX- und Touch.clientY-Koordinaten vom Startpunkt der Berührung bis zum Endpunkt der Berührung berechnet.

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;
  },
  false,
);

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

Spezifikationen

Specification
Touch Events
# dom-touch-clientx

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
clientX

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Has more compatibility info.