js实现多点触控

多点触控基础概念

多点触控通过监听触摸事件（touchstart、touchmove、touchend、touchcancel）实现。每个触摸点会生成一个 Touch 对象，包含位置、标识符等信息。

监听触摸事件

注册事件监听器来捕获触摸行为：

element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);

处理触摸数据

在事件处理函数中，通过 event.touches 获取当前所有触摸点：

function handleTouchStart(event) {
  const touches = event.touches; // 包含所有激活的触摸点
  for (let i = 0; i < touches.length; i++) {
    console.log(`Touch ${i}: X=${touches[i].clientX}, Y=${touches[i].clientY}`);
  }
}

跟踪触摸点

使用 Touch.identifier 唯一标识每个触摸点，实现多点跟踪：

const activeTouches = {};

function handleTouchStart(event) {
  Array.from(event.touches).forEach(touch => {
    activeTouches[touch.identifier] = {
      x: touch.clientX,
      y: touch.clientY
    };
  });
}

处理手势操作

通过多点触控可实现缩放、旋转等手势。例如双指缩放：

let initialDistance;

function handleTouchStart(event) {
  if (event.touches.length === 2) {
    initialDistance = getDistance(event.touches[0], event.touches[1]);
  }
}

function handleTouchMove(event) {
  if (event.touches.length === 2) {
    const currentDistance = getDistance(event.touches[0], event.touches[1]);
    const scale = currentDistance / initialDistance;
    element.style.transform = `scale(${scale})`;
  }
}

function getDistance(touch1, touch2) {
  return Math.hypot(
    touch2.clientX - touch1.clientX,
    touch2.clientY - touch1.clientY
  );
}

兼容性注意事项

• 部分旧浏览器可能不支持全部触摸事件。
• 移动端需添加视口元标签防止默认行为：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

性能优化

避免在 touchmove 中执行复杂计算，使用 requestAnimationFrame 节流：

function handleTouchMove(event) {
  requestAnimationFrame(() => {
    // 更新UI的逻辑
  });
}