Touch: pageX-Eigenschaft

Wert

Ein double Gleitkommawert, der die X-Koordinate des Berührungspunkts relativ zur Ansicht darstellt, einschließlich eines eventuellen Scrollversatzes.

Beispiele

Dieses Beispiel veranschaulicht, wie Sie auf die Eigenschaften Touch.pageX und Touch.pageY des Touch-Objekts zugreifen können. Die Eigenschaft Touch.pageX ist die horizontale Koordinate eines Berührungspunkts relativ zur Ansicht (in CSS-Pixeln), einschließlich eines eventuellen Scrollversatzes. Die Eigenschaft Touch.pageY ist die vertikale Koordinate eines Berührungspunkts relativ zur Ansicht (in CSS-Pixeln), einschließlich eines eventuellen Scrollversatzes.

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

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

Spezifikationen

Browser-Kompatibilität