JavaScript触摸事件实现图片左右移动失效问题排查

嘿，我之前也碰到过一模一样的坑！既然你已经确认事件触发了，那咱们从这几个方向排查：

1. 你是不是没正确获取触摸点的坐标？ #

很多人会犯这个错：touch.pageX 写法不对！触摸事件的对象里，当前触摸的手指信息存在 e.touches 数组里，你得取第一个元素的坐标才行。比如应该写：

const currentX = e.touches[0].pageX;

直接用 touch.pageX 根本拿不到正确的实时坐标，自然数值不会变化。

2. 有没有阻止浏览器的默认触摸行为？ #

浏览器自带的触摸默认行为（比如页面滚动、缩放）会干扰你的事件逻辑，甚至导致坐标计算异常。一定要在 touchstart 和 touchmove 里加上：

e.preventDefault();

不过要注意：如果你的页面需要滚动，可能得加个判断——只有当用户是水平滑动图片时才阻止默认行为，避免影响页面垂直滚动。

3. 初始坐标没正确记录？ #

要实现平滑移动，你得在 touchstart 时记录下初始触摸位置，然后在 touchmove 里计算偏移量。比如完整的示例代码：

<img id="moveImg" src="your-image.jpg" style="position: relative; transition: transform 0.1s ease;">

const img = document.getElementById('moveImg');
let startX = 0;
let currentOffset = 0;

img.addEventListener('touchstart', (e) => {
  e.preventDefault();
  startX = e.touches[0].pageX; // 记录初始触摸点
  console.log('触摸开始，初始X坐标：', startX);
});

img.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const currentX = e.touches[0].pageX;
  const moveDistance = currentX - startX; // 计算本次移动的距离
  currentOffset += moveDistance; // 累计总偏移量
  img.style.transform = `translateX(${currentOffset}px)`; // 更新图片位置
  console.log('触摸移动，当前X坐标：', currentX, '本次移动距离：', moveDistance);
  startX = currentX; // 更新初始点，为下一次移动做准备
});

4. 图片的定位方式对吗？ #

如果你的图片是默认的 static 定位，虽然 transform 也能生效，但给图片设置 position: relative 会更稳妥，避免一些奇怪的布局冲突。

把这些点都检查一遍，应该就能解决问题了！我当时就是因为没取 e.touches[0] 卡了好久😂

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