触摸事件实战总结教你搞定移动端交互问题

项目初期的技术选型

最近我们团队接了一个移动应用的项目，主要是做一个基于Web的轻量级App。客户要求用户体验要尽可能接近原生App，特别是在触控操作上。这对我们来说是个不小的挑战，因为Web端的触控体验和原生App还是有很大差距的。

在技术选型阶段，我们考虑过使用一些现有的框架，比如React Native或Flutter，但考虑到项目周期和团队熟悉度，最终还是决定用纯Web技术来实现。这就意味着我们需要自己处理所有的Touch事件，确保用户在滑动、点击等操作时有流畅的体验。

核心代码就这几行

在项目中，我们主要用到了以下几种Touch事件：touchstart、touchmove和touchend。这些事件能让我们捕捉到用户的触控行为，然后进行相应的处理。

下面是一个简单的例子，展示了如何使用这些事件来实现一个基本的滑动效果：

const container = document.querySelector('.container');

let startX, startY, currentX, currentY;

container.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
});

container.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  currentX = touch.clientX;
  currentY = touch.clientY;

  const deltaX = currentX - startX;
  const deltaY = currentY - startY;

  // 这里可以添加你的逻辑，比如滚动内容
  console.log(Delta X: ${deltaX}, Delta Y: ${deltaY});
});

container.addEventListener('touchend', (e) => {
  console.log('Touch ended');
});

又踩坑了，touchmove滚动失效

一开始，我们在实现滑动效果时遇到了不少问题。其中最大的坑是touchmove事件有时候会失效，导致用户滑动时页面没有响应。我们查了很多资料，发现这个问题主要有两个原因：

• 浏览器默认行为：浏览器会默认阻止某些触摸事件，特别是当它认为用户是在尝试滚动页面时。
• 性能问题：频繁触发touchmove事件会导致性能瓶颈，特别是当页面内容较多时。

为了解决这个问题，我们采取了以下几个措施：

1. 在touchstart事件中调用event.preventDefault()来阻止浏览器的默认行为。
2. 优化touchmove事件中的处理逻辑，减少不必要的计算。
3. 使用requestAnimationFrame来平滑动画，提高性能。

下面是改进后的代码：

const container = document.querySelector('.container');

let startX, startY, currentX, currentY, isDragging = false;

container.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
  isDragging = true;
  e.preventDefault(); // 阻止浏览器默认行为
});

container.addEventListener('touchmove', (e) => {
  if (!isDragging) return;

  const touch = e.touches[0];
  currentX = touch.clientX;
  currentY = touch.clientY;

  const deltaX = currentX - startX;
  const deltaY = currentY - startY;

  // 使用requestAnimationFrame来平滑动画
  requestAnimationFrame(() => {
    // 这里可以添加你的逻辑，比如滚动内容
    console.log(Delta X: ${deltaX}, Delta Y: ${deltaY});
  });

  e.preventDefault(); // 阻止浏览器默认行为
});

container.addEventListener('touchend', (e) => {
  isDragging = false;
  console.log('Touch ended');
});

谁更灵活？谁更省事？

在项目中，我们也尝试了几种不同的方案来处理Touch事件。这里简单对比一下：

• 原生JavaScript：灵活性高，可以直接控制每一个细节，但需要自己处理很多底层逻辑，容易出错。
• 第三方库（如Hammer.js）：封装了很多常用的手势识别功能，使用起来非常方便，但可能会引入额外的依赖，且不够灵活。
• 自定义手势识别：介于两者之间，可以根据需求定制手势识别逻辑，但需要一定的开发成本。

我们最终选择了原生JavaScript + 自定义手势识别的方案，这样既能保证灵活性，又能控制好性能。

回顾与反思

经过一段时间的调试和优化，我们的项目终于上线了。从用户反馈来看，整体体验还算不错，但也有一些小问题需要后续优化：

• 在某些低端设备上，滑动仍然有些卡顿，需要进一步优化性能。
• 手势识别的精度还有待提高，特别是在边缘区域的触控识别。

总的来说，这次项目让我对Touch事件有了更深入的理解，也积累了不少实战经验。希望这些分享对你有所帮助，如果有什么更好的实现方式或建议，欢迎在评论区交流。