手势动画组件在移动端失效是怎么回事？

FSD-景叶提问于 2026-03-18 10:55:19 阅读 40

组件

我用 hammer.js 做了个滑动切换的动画组件，本地 Chrome 模拟器上好好的，一到真机（iOS 和安卓）就完全没反应，连事件都不触发。

试过加 touch-action: none; 也试过给容器显式设置高度，还是不行。控制台也没报错，就是静悄悄地不工作……是不是哪里漏了什么配置？

const el = document.getElementById('slider');
const mc = new Hammer(el);
mc.on('swipeleft swiperight', (ev) => {
  console.log('gesture detected:', ev.type);
  // 触发动画逻辑
});

我来解答赞 4 收藏

反馈

1 条解答

育柯 Dev Lv1

这个问题的根源一般是元素没有具体尺寸，hammer.js 算不出滑动距离来。

本地模拟器能过是因为 Chrome 模拟器默认给了元素尺寸，真机上是 0。

改一下就行：

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



// 确保元素有尺寸

el.style.touchAction = 'none';  // 这个要有



// 用 Hammer Manager 配合 preventDefaults

const mc = new Hammer.Manager(el);

mc.add(new Hammer.Swipe({ 

  direction: Hammer.DIRECTION_HORIZONTAL,

  threshold: 10  // 滑动阈值设小一点

}));



// iOS 必须阻止默认行为

mc.on('swipeleft swiperight', (ev) => {

  ev.preventDefault();  // 加这行

  console.log('gesture detected:', ev.type);

  // 触发动画逻辑

});

如果还不行，检查一下 CSS：

#slider {

  width: 100%;

  height: 300px;  /* 必须有明确高度，不能是 auto */

  touch-action: none;

  overflow: hidden;

}

核心就两点：元素宽高写死、preventDefault。加上这两基本就好了。

2026-03-18 16:06