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

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

交互

我用 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 已经不兼容新机型了？

手势操作

我来解答赞 11 收藏

反馈

2 条解答

迷人的建刚 Lv1

Hammer.js确实要配touchAction，但光设成none还不够。手机端还有几个坑要填，改一下就行：

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

el.style.touchAction = 'none'; // 先干掉默认行为



const mc = new Hammer.Manager(el, {

  touchAction: 'none',

  recognizers: [

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

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

  ]

});



// 必须加这行，现在手机浏览器都要求被动监听

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

  if(e.cancelable) e.preventDefault();

}, { passive: false });



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

主要问题：
1. 现在的手机浏览器默认都是passive事件监听，必须显式关掉
2. Hammer的初始化参数要放在Manager里，单独add有时候不灵
3. 样式和js的touchAction都要设

还不行的话可能是CSS问题，检查下有没有overflow:hidden之类的把事件吃掉了。

2026-03-10 11:06

司徒恩豪 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