Hammer.js双指缩放时为什么会触发点击事件？

爱书的笔记提问于 2026-02-18 09:54:46 阅读 59

交互

在移动端网页里用Hammer.js给图片绑定了双指缩放和点击事件，但每次缩放结束后总会意外触发点击跳转。试过在缩放事件里用event.stopPropagation()也不行…


const mc = new Hammer(document.getElementById('myImage'));
mc.get('pinch').set({ enable: true });
mc.on('tap', () => console.log('点击被触发了'));
mc.on('pinch', (e) => {
  // 缩放处理逻辑
  e.srcEvent.preventDefault();
});

奇怪的是当用单指快速点击没问题，但双指缩放结束后0.5秒内再碰屏幕就会立刻触发tap事件。有没有办法让缩放结束后延迟一段时间再允许点击？

手势操作

我来解答赞 3 收藏

反馈

1 条解答

设计师沐言 Lv1

这个问题确实有点烦人，Hammer.js 的手势识别在某些场景下会有冲突。缩放结束后触发点击是因为它的手势识别机制会把缩放后的触碰误判为 tap 事件。

解决办法是加一个延迟锁，在缩放结束后设置一个短暂的禁用期，等过了这段时间再允许触发点击事件。复制这个代码试试：

const mc = new Hammer(document.getElementById('myImage'));

mc.get('pinch').set({ enable: true });



let isPinched = false;

let pinchTimeout;



mc.on('pinch', () => {

  isPinched = true;

  clearTimeout(pinchTimeout);

  // 缩放结束后延迟500毫秒再允许点击

  pinchTimeout = setTimeout(() => {

    isPinched = false;

  }, 500);

});



mc.on('tap', (e) => {

  if (isPinched) {

    e.preventDefault();

    return;

  }

  console.log('点击被触发了');

});

逻辑很简单，用 isPinched 标记是否刚完成缩放，如果是就阻止点击事件。延迟时间可以根据需求调整，500 毫秒是个比较合适的值。

如果还有问题，记得检查其他地方是不是也有类似的冲突逻辑。这种问题调试起来挺费劲的，不过这个方案应该能搞定。

2026-02-18 10:02