Hammer.js 手势识别在移动端失效是怎么回事？

Newb.莉娟提问于 2026-03-05 14:56:20 阅读 10

交互

我用 Hammer.js 给一个图片查看器加了双指缩放和拖拽功能，在桌面浏览器测试没问题，但一到手机上就完全没反应。查了文档说要调用 touchAction，也试过设成 'none'，还是不行。

我的初始化代码是这样的：

const el = document.getElementById('viewer');
const mc = new Hammer.Manager(el);
mc.add(new Hammer.Pinch({ enable: true }));
mc.add(new Hammer.Pan({ direction: Hammer.DIRECTION_ALL }));
mc.on('pinch pan', handleGesture);

是不是漏了什么关键配置？或者现在 Hammer.js 已经不兼容新机型了？

手势操作

我来解答赞 2 收藏

反馈

1 条解答

司徒恩豪 Lv1

哈，又是Hammer.js的坑，这玩意在移动端确实需要特别注意。你漏了两个关键点：

1. 首先要把默认的tap识别器禁用掉，这玩意会和手势冲突
2. CSS里要确保设置了正确的touch-action，并且元素不能有overflow: hidden之类的限制

试试这样改：

const el = document.getElementById('viewer');

el.style.touchAction = 'none';  // 这个必须设



const mc = new Hammer.Manager(el, {

  recognizers: [

    [Hammer.Pinch, { enable: true }],

    [Hammer.Pan, { direction: Hammer.DIRECTION_ALL }]

  ]

});



// 关键！把默认的tap识别器干掉

mc.get('tap').set({ enable: false });

mc.on('pinch pan', handleGesture);

另外检查下你的CSS，确保没有阻止事件冒泡的样式。我上周刚踩过这个坑，调试到凌晨两点才发现是父元素的pointer-events设成了none...（扶额）

如果还不行，可以试试在初始化时加上domEvents: true参数，有时候老版本Hammer需要这个。

2026-03-05 15:01