Hammer.js 的 swipe 手势在 iOS 上不触发是怎么回事？

这个问题挺常见的，iOS 上 Hammer.js 的 swipe 事件触发不了，主要有几个坑：

第一个，最可能的原因是需要设置 preventDefault: true。iOS 的 Safari 默认会拦截很多手势，你得告诉 Hammer 抢过来：

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

mc.get('swipe').set({ 

  direction: Hammer.DIRECTION_HORIZONTAL,

  preventDefault: true  // 这个是关键

});

mc.on('swipeleft swiperight', (e) => {  console.log('swiped!', e.type);

});

第二个，iOS 必须在用户先触摸一次页面之后才能触发手势，这是 Safari 的限制。你可以在页面加载完成后让用户先点一下，或者在某个按钮的点击事件里初始化 Hammer。

第三个，touch-action: none 不仅要加在目标元素上，最好加在它的父元素或者直接加在 body 上试试：

#slider, body {

  touch-action: none;

}

第四个，如果上面都试了还是不行，可以试试用 Manager 的方式显式配置 recognizer：

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

const swipe = new Hammer.Swipe({ 

  direction: Hammer.DIRECTION_HORIZONTAL,

  threshold: 10,

  velocity: 0.3

});

mc.add(swipe);

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

  console.log('swiped!', e.type);

});

基本上 preventDefault: true 能解决 90% 的问题。你先试试这个。