触摸：clientX 属性

Touch.clientX 只读属性返回触摸点相对于视窗的 X 坐标，不包括任何滚动偏移量。

值

表示触摸点相对于视窗的 X 坐标的双精度浮点数，不包括任何滚动偏移量。

示例

此示例说明了如何使用 Touch 对象的 Touch.clientX 和 Touch.clientY 属性。Touch.clientX 属性是触摸点相对于浏览器视窗的水平坐标，不包括任何滚动偏移量。 Touch.clientY 属性是触摸点相对于浏览器视窗的垂直坐标，不包括任何滚动偏移量。

在此示例中，我们假设用户对 id 为 source 的元素进行触摸，并在元素内或元素外移动，然后释放与表面的接触。当 touchend 事件处理程序被调用时，会计算从起始触摸点到结束触摸点的 Touch.clientX 和 Touch.clientY 坐标的变化。

js
// Register touchstart and touchend listeners for element 'source'
const src = document.getElementById("source");
let clientX;
let clientY;

src.addEventListener(
  "touchstart",
  (e) => {
    // Cache the client X/Y coordinates
    clientX = e.touches[0].clientX;
    clientY = e.touches[0].clientY;
  },
  false,
);

src.addEventListener(
  "touchend",
  (e) => {
    let deltaX;
    let deltaY;

    // Compute the change in X and Y coordinates.
    // The first touch point in the changedTouches
    // list is the touch point that was just removed from the surface.
    deltaX = e.changedTouches[0].clientX - clientX;
    deltaY = e.changedTouches[0].clientY - clientY;

    // Process the data…
  },
  false,
);

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载