移动端捏合手势怎么监听才有效？

技术金壵提问于 2026-03-21 21:19:17 阅读 6

移动

我在手机网页上想实现图片的捏合缩放，但试了好几种方法都识别不到 pinch 手势。

用 touchstart/touchmove 自己算两指距离变化太卡，而且容易误触。查资料说有些浏览器不支持原生的 gesture 事件，那现在到底该怎么搞？

我试过这段代码，但完全没反应：

element.addEventListener('gesturestart', (e) => {
  e.preventDefault();
  console.log('pinch start', e.scale);
});

手势识别

我来解答赞 2 收藏

反馈

1 条解答

技术胜换 Lv1

官方文档里说 gesture 事件的支持情况并不理想，很多现代浏览器已经弃用了这个事件。对于移动端的捏合手势，推荐使用 touchstart、touchmove 和 touchend 事件来自己计算两个触摸点的距离变化，虽然你说这种方法比较卡且容易误触，但实际上这是目前最可靠的跨浏览器解决方案。

以下是一个基本的实现思路，你可以根据实际需求进行优化：

pre class="pure-highlightjs line-numbers">

let startDistance = 0;

let currentScale = 1;



const element = document.getElementById('your-image-id');



element.addEventListener('touchstart', (e) => {

  if (e.touches.length === 2) {

    const touch1 = e.touches[0];

    const touch2 = e.touches[1];

    startDistance = calculateDistance(touch1, touch2);

  }

});



element.addEventListener('touchmove', (e) => {

  if (e.touches.length === 2) {

    e.preventDefault();

    const touch1 = e.touches[0];

    const touch2 = e.touches[1];

    const currentDistance = calculateDistance(touch1, touch2);

    const scale = currentDistance / startDistance;

    currentScale *= scale;

    element.style.transform = scale(${currentScale});

    startDistance = currentDistance;

  }

});



function calculateDistance(point1, point2) {

  return Math.sqrt(

    Math.pow(point2.clientX - point1.clientX, 2) +

    Math.pow(point2.clientY - point1.clientY, 2)

  );

}

这段代码首先在 touchstart 事件中记录两个触摸点的初始距离，然后在 touchmove 事件中实时计算新的触摸点距离，并据此调整元素的缩放比例。注意，这里的 preventDefault 调用是为了防止默认的浏览器行为干扰手势识别。

希望这个方案能帮到你，虽然看起来复杂了一点，但这也是目前最通用的做法。

2026-03-21 22:03