掌握移动端常用的touch事件

在移动端开发中，touch 事件是非常重要的一类事件。它使得开发者能够实现触摸屏交互效果，尤其是适用于触摸屏设备，如智能手机、平板等。与鼠标事件不同，touch 事件能够捕捉到屏幕上的多个触摸点，能够更精确地实现触摸交互。

1. `touchstart`、`touchmove`、`touchend` 事件

移动端常见的 touch 事件包括：touchstart、touchmove 和 touchend。这些事件对应着用户在屏幕上的触摸行为，可以捕获手指接触、移动、抬起的过程。

1.1 `touchstart` 事件

touchstart 事件在手指触摸屏幕的瞬间触发。通常用来检测用户是否开始触摸屏幕。

1.1.1 示例：检测触摸开始

// 监听 touchstart 事件
document.addEventListener('touchstart', function(event) {
  // 输出触摸的触点数量
  console.log('touchstart 事件：', event.touches.length);
});

event.touches：返回当前屏幕上的所有触摸点。可以通过 touches.length 获取触摸点的数量。
touchstart 事件通常用于触摸的开始，例如点击按钮、开始拖动元素等。

1.2 `touchmove` 事件

touchmove 事件在触摸点在屏幕上移动时持续触发，通常用来实现拖拽等交互效果。

1.2.1 示例：拖动元素

// 获取需要拖动的元素
const draggableElement = document.getElementById('draggable');

// 监听 touchstart 和 touchmove 事件
draggableElement.addEventListener('touchstart', function(event) {
  // 获取初始位置
  const startX = event.touches[0].clientX;
  const startY = event.touches[0].clientY;

  // 监听 touchmove 事件
  draggableElement.addEventListener('touchmove', function(event) {
    const moveX = event.touches[0].clientX - startX;
    const moveY = event.touches[0].clientY - startY;

    // 更新元素的位置
    draggableElement.style.transform = `translate(${moveX}px, ${moveY}px)`;

    // 阻止默认的滚动行为
    event.preventDefault();
  });
});

event.touches[0]：获取触摸点的第一个坐标，clientX 和 clientY 分别表示触摸点的水平和垂直坐标。
touchmove 事件用于实现拖动交互效果。使用 event.preventDefault() 可以阻止页面的滚动等默认行为。

1.3 `touchend` 事件

touchend 事件在触摸点从屏幕上移开时触发。通常用于触摸结束后的处理，如点击按钮的提交动作、手势的结束等。

1.3.1 示例：检测触摸结束

// 监听 touchend 事件
document.addEventListener('touchend', function(event) {
  // 输出触摸结束时触点的数量
  console.log('touchend 事件：', event.changedTouches.length);
});

event.changedTouches：返回一个包含所有触摸结束时的触点的信息，通常只有一个触点。

2. 多点触摸

touch 事件支持多点触摸，意味着用户可以用多个手指同时触摸屏幕。在触摸事件中，touches 数组包含了所有当前的触摸点，而 changedTouches 数组则包含了触摸结束或开始时的触点。

2.1 示例：多点触摸

// 监听 touchstart 事件
document.addEventListener('touchstart', function(event) {
  // 判断是否有多个触摸点
  if (event.touches.length > 1) {
    console.log('多点触摸开始，触摸点数量：', event.touches.length);
  }
});

// 监听 touchmove 事件
document.addEventListener('touchmove', function(event) {
  // 输出每个触摸点的坐标
  Array.from(event.touches).forEach(function(touch, index) {
    console.log(`触摸点 ${index + 1}: (${touch.clientX}, ${touch.clientY})`);
  });
});