HTML5手势操作实现全攻略

let startX = 0;
<p>element.addEventListener('touchstart', function(e) {
startX = e.touches[0].clientX;
});</p><p>element.addEventListener('touchmove', function(e) {
const currentX = e.touches[0].clientX;
const diffX = startX - currentX;</p><p>if (diffX > 50) {
console.log('向左滑动');
// 执行左滑逻辑
} else if (diffX < -50) {
console.log('向右滑动');
// 执行右滑逻辑
}
});</p>

function getDistance(touches) {
  const dx = touches[0].clientX - touches[1].clientX;
  const dy = touches[0].clientY - touches[1].clientY;
  return Math.sqrt(dx * dx + dy * dy);
}
<p>let initialDistance = 0;</p><p>element.addEventListener('touchstart', function(e) {
if (e.touches.length === 2) {
initialDistance = getDistance(e.touches);
}
});</p><p>element.addEventListener('touchmove', function(e) {
if (e.touches.length === 2) {
const currentDistance = getDistance(e.touches);
if (currentDistance > initialDistance + 10) {
console.log('正在放大');
} else if (currentDistance < initialDistance - 10) {
console.log('正在缩小');
}
}
});</p>

const mc = new Hammer(element);
mc.on("swipeleft swiperight pan pinch rotate", function(ev) {
  console.log(ev.type); // 输出手势类型
  if (ev.type === 'swipeleft') {
    // 处理左滑
  }
});