Touch: pageX property

Limited availability

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

The Touch.pageX read-only property returns the X coordinate of the touch point relative to the viewport, including any scroll offset.

Value

A double floating point value representing the X coordinate of the touch point relative to the viewport, including any scroll offset.

Examples

This example illustrates how to access the Touch object's Touch.pageX and Touch.pageY properties. The Touch.pageX property is the horizontal coordinate of a touch point relative to the viewport (in CSS pixels), including any scroll offset. The Touch.pageY property is the vertical coordinate of a touch point relative to the viewport (in CSS pixels), including any scroll offset.

In following simple code snippet, we assume the user initiates one or more touch contacts on the source element, moves the touch points and then releases all contacts with the surface. When the touchmove event handler is invoked, each touch point's Touch.pageX and Touch.pageY coordinates are accessed via the event's TouchEvent.changedTouches list.

js
// 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,
);

Specifications

Specification
Touch Events
# dom-touch-pagex

Browser compatibility

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
pageX

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.