iOS端pointermove事件movementX/Y为undefined的原因是什么？

DevOps 小满

2026-8-28

问题结论

iOS端（含iOS上运行的所有第三方浏览器）的WebKit内核长期未实现PointerEvent实例上的movementX、movementY属性，这是内核层面的实现缺失，和是否添加touch-action: none样式无关，在Chrome、Safari for iOS上复现属于预期表现。

详细说明

iOS平台对第三方浏览器有强制内核限制，所有上架App Store的浏览器类应用必须使用苹果提供的WebKit内核渲染页面，不存在独立内核的Chrome for iOS，因此你在iOS端Chrome、Safari上遇到的表现完全一致。
该属性缺失不属于标准兼容性表常规标注的不兼容特性，属于WebKit版本迭代中的实现缺口，在2024年之前推送的所有iOS正式版系统中，pointermove事件实例都不会返回movementX/movementY值，直接读取结果为undefined。

兼容方案

你可以通过缓存上一帧指针坐标的方式手动计算移动增量，兼容所有环境，示例代码如下：

// 缓存上一次指针位置
let cachedPointerX = 0;
let cachedPointerY = 0;
let isPointerTracking = false;

const targetElement = document.querySelector('#your-target-node');

targetElement.addEventListener('pointerdown', (e) => {
  cachedPointerX = e.clientX;
  cachedPointerY = e.clientY;
  isPointerTracking = true;
});

targetElement.addEventListener('pointermove', (e) => {
  if (!isPointerTracking) return;
  // 优先使用原生属性，无原生属性时降级为手动计算
  const deltaX = e.movementX ?? (e.clientX - cachedPointerX);
  const deltaY = e.movementY ?? (e.clientY - cachedPointerY);
  // 更新缓存坐标供下次计算使用
  cachedPointerX = e.clientX;
  cachedPointerY = e.clientY;

  // 后续业务逻辑直接使用deltaX、deltaY即可
});

// 指针抬起/离开时重置追踪状态
['pointerup', 'pointercancel', 'pointerleave'].forEach(eventName => {
  targetElement.addEventListener(eventName, () => {
    isPointerTracking = false;
  });
});