Touch: pageX-Eigenschaft

Ein double Gleitkommawert, der die X-Koordinate des Berührungspunkts relativ zum Ansichtsfenster, einschließlich etwaiger Bildlauf-Verschiebung, darstellt.

Dieses Beispiel veranschaulicht, wie auf die Eigenschaften Touch.pageX des Touch-Objekts und Touch.pageY zugegriffen wird. Die Eigenschaft Touch.pageX ist die horizontale Koordinate eines Berührungspunkts relativ zum Ansichtsfenster (in CSS-Pixel), einschließlich etwaiger Bildlauf-Verschiebung. Die Eigenschaft Touch.pageY ist die vertikale Koordinate eines Berührungspunkts relativ zum Ansichtsfenster (in CSS-Pixel), einschließlich etwaiger Bildlauf-Verschiebung.

Im folgenden einfachen Code-Snippet nehmen wir an, dass der Benutzer einen oder mehrere Berührungskontakte auf dem source-Element initiiert, die Berührungspunkte bewegt und dann alle Kontakte mit der Oberfläche beendet. Wenn der touchmove-Ereignishandler aufgerufen wird, werden die Touch.pageX- und Touch.pageY-Koordinaten jedes Berührungspunkts über die TouchEvent.changedTouches-Liste aufgerufen.

// Register a touchmove listeners for the 'source' element
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // Iterate through the touch points that have moved and log each
    // of the pageX/Y coordinates. The unit of each coordinate is CSS pixels.
    for (let i = 0; i < e.changedTouches.length; i++) {
      console.log(`touchpoint[${i}].pageX = ${e.changedTouches[i].pageX}`);
      console.log(`touchpoint[${i}].pageY = ${e.changedTouches[i].pageY}`);
    }
  },
  false,
);