TouchMove事件详解与常见问题解决实战经验分享

又踩坑了，touchmove滚动失效

在最近的一个移动端项目中，我遇到了一个棘手的问题：touchmove事件处理。这玩意儿看起来简单，但实际用起来却有很多坑。今天我就来对比一下几种常见的touchmove处理方案，分享一下我的实战经验。

三种主流touchmove处理方案

目前主流的touchmove处理方案有三种：原生JavaScript、jQuery插件和第三方库（如Hammer.js）。每种方案都有其优缺点，下面我来具体分析一下。

谁更灵活？谁更省事？

先说结论吧，我个人比较喜欢用原生JavaScript，因为它最灵活，也最可控。jQuery插件和Hammer.js虽然方便，但在某些场景下可能会有一些意想不到的问题。

原生JavaScript

原生JavaScript的好处是完全可控，可以自由地实现各种复杂的逻辑。举个例子：

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

document.addEventListener('touchmove', (e) => {
  const moveX = e.touches[0].clientX - startX;
  const moveY = e.touches[0].clientY - startY;

  if (Math.abs(moveX) > Math.abs(moveY)) {
    // 水平滑动
    e.preventDefault();
  } else {
    // 垂直滑动
    e.preventDefault();
  }
});

这段代码实现了基本的水平和垂直滑动判断，并且可以阻止默认行为。不过要注意的是，e.preventDefault()一定要加上，否则浏览器会处理默认的滚动行为。

jQuery插件

jQuery插件的好处是使用简单，几行代码就能搞定。比如用swipe.js：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myElement').swipe({
      swipe: function(event, direction, distance, duration, fingerCount) {
        if (direction === 'left') {
          console.log('向左滑动');
        } else if (direction === 'right') {
          console.log('向右滑动');
        }
      }
    });
  });
</script>

这段代码很简单，但问题在于，如果你需要做一些复杂的逻辑处理，可能就需要自己再写一些额外的代码了。另外，jQuery本身也有一定的性能开销。

Hammer.js

Hammer.js是一个非常强大的手势库，支持多种手势识别，使用起来也很方便。比如：

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const myElement = document.getElementById('myElement');
    const hammer = new Hammer(myElement);

    hammer.on('swipeleft', (e) => {
      console.log('向左滑动');
    });

    hammer.on('swiperight', (e) => {
      console.log('向右滑动');
    });
  });
</script>

Hammer.js确实很好用，但是它的体积比原生JavaScript要大，而且有时候会出现一些兼容性问题。特别是对于一些老旧设备，可能会出现卡顿的情况。

性能对比：差距比我想象的大

性能方面，原生JavaScript肯定是最好的，因为它没有额外的库和插件开销。jQuery插件次之，因为它毕竟还有一些额外的代码。Hammer.js虽然功能强大，但是体积较大，性能上会有一些损耗。

我自己在项目中测试了一下，发现原生JavaScript的性能明显优于其他两种方案。尤其是在一些低端设备上，原生JavaScript的表现更加稳定。

我的选型逻辑

总的来说，选择哪种方案还是要看具体的项目需求。如果项目对性能要求很高，或者需要做很多自定义的逻辑处理，我会毫不犹豫地选择原生JavaScript。如果项目比较简单，或者团队成员对jQuery比较熟悉，可以用jQuery插件。至于Hammer.js，我觉得它适合那些需要处理复杂手势交互的项目。

结尾

以上是我个人对touchmove处理方案的对比总结，希望能对你有所帮助。如果有更好的实现方式，欢迎在评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。