使用触摸事件时touchmove函数中pageX值未更新的问题

嘿，这个问题我之前踩过好几次坑！你遇到的touchmove里pageX一直不变的情况，大概率是下面两个原因之一，我给你拆解下怎么解决：

1. 没有阻止触摸事件的默认行为 #

浏览器的触摸默认行为（比如页面滚动、缩放）会干扰touchmove事件的正常触发，导致事件对象里的坐标数据无法实时更新。你需要在touchstart或者touchmove事件里添加e.preventDefault()来禁用这些默认行为：

const targetElement = document.getElementById('your-target-element');

targetElement.addEventListener('touchstart', (e) => {
  e.preventDefault(); // 关键：阻止默认滚动/缩放行为，避免干扰坐标更新
  console.log('touchstart pageX:', e.touches[0].pageX);
});

targetElement.addEventListener('touchmove', (e) => {
  e.preventDefault();
  console.log('touchmove pageX:', e.touches[0].pageX); // 现在应该会实时变化了
});

⚠️ 注意：如果你的页面需要保留滚动功能，不要全局阻止默认行为，可以针对性地在需要拖动的元素上阻止，或者判断触摸方向后再决定是否阻止。

2. 错误复用了touchstart时的旧坐标值 #

如果你在touchstart时把pageX存在了变量里，然后在touchmove里一直用这个旧变量而不是从当前事件对象里获取，那肯定会一直输出同一个值。比如这种错误写法：

// 错误示例！
let oldPageX;
targetElement.addEventListener('touchstart', (e) => {
  oldPageX = e.touches[0].pageX;
  console.log('touchstart pageX:', oldPageX);
});

targetElement.addEventListener('touchmove', (e) => {
  console.log('touchmove pageX:', oldPageX); // 一直输出touchstart时的数值
});

正确的做法是每次touchmove都从当前事件的e.touches[0]里获取最新的pageX，就像第一个示例里那样。

额外提醒 #

触摸事件的坐标存在e.touches数组里（因为支持多指触摸），单指操作时取e.touches[0]就可以；如果是处理手指离开的情况，才用e.changedTouches。

按照上面的方法修改后，你应该就能看到touchmove里的pageX实时变化了！

内容的提问来源于stack exchange，提问作者rpivovar