Touch：pageX 属性

Limited availability

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

Touch.pageX 只读属性返回触摸点相对于屏幕的 X 坐标，包括任何滚动偏移。

值

double 类型的浮点值，表示触摸点相对于屏幕的 X 坐标，包括任何滚动偏移。

示例

此示例展示了如何访问 Touch 对象的 Touch.pageX 和 Touch.pageY 属性。Touch.pageX 属性表示触摸点相对于屏幕的水平坐标（以 CSS 像素为单位），包括任何滚动偏移量。Touch.pageY 属性表示触摸点相对于屏幕的垂直坐标（以 CSS 像素为单位），包括任何滚动偏移量。

在以下简单的代码片段中，我们假设用户在 source 元素上发起一个或多个触摸点接触，移动触摸点，然后释放与表面的接触。当触发 touchmove 事件处理器时，可以通过事件的 TouchEvent.changedTouches 列表访问每个触控点的 Touch.pageX 和 Touch.pageY 坐标。

js
// 为“source”元素注册一个 touchmove 监听器。
const src = document.getElementById("source");

src.addEventListener(
  "touchmove",
  (e) => {
    // 遍历已移动的触摸点，并记录每个 pageX 和 pageY 的坐标。每个坐标的单位是 CSS 像素。
    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,
);

规范

Specification
Touch Events
# dom-touch-pagex

浏览器兼容性

BCD tables only load in the browser