Touch:pageX 属性

Touch.pageX 只读属性返回触摸点相对于视口(包括任何滚动偏移量)的 X 坐标。

一个表示触摸点相对于视口(包括任何滚动偏移量)的 X 坐标的双精度浮点数。

示例

此示例说明了如何访问 Touch 对象的 Touch.pageXTouch.pageY 属性。Touch.pageX 属性是触摸点相对于视口(以 CSS 像素为单位)的水平坐标,包括任何滚动偏移量。Touch.pageY 属性是触摸点相对于视口(以 CSS 像素为单位)的垂直坐标,包括任何滚动偏移量。

在下面的简单代码片段中,我们假设用户在 source 元素上启动了一个或多个触摸点,移动触摸点,然后释放与表面的所有接触。当 touchmove 事件处理程序被调用时,每个触摸点的 Touch.pageXTouch.pageY 坐标通过事件的 TouchEvent.changedTouches 列表访问。

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

规范

规范
触摸事件
# dom-touch-pagex

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。