Hammer.js设置touch-action: pan-x后无法检测swipe事件如何解决

核心原因 #

手动给#sportCourtsRow元素添加touch-action: pan-x !important会强制浏览器原生接管水平方向触摸平移行为，Hammer.js无法获取完整触摸事件序列完成swipe动作判定；移除该属性后滚动失效，是因为Hammer.js默认会自动配置touch-action属性避免浏览器默认行为干扰事件识别，与原生滚动需求冲突。

解决方案 #

按以下步骤修改即可同时保留原生滚动能力和swipe事件检测能力：

• 第一步：删除CSS中#sportCourtsRow选择器下的touch-action: pan-x !important;行，禁止手动强制覆盖touch-action属性
• 第二步：创建Hammer实例时主动声明touchAction配置项，让Hammer自动适配两种需求，修改JS代码如下：

var hammertime = new Hammer(document.getElementById("sportCourtsRow"), {
  touchAction: 'pan-x' // 允许浏览器原生处理水平滚动，同时保留Hammer的事件监听能力
});
hammertime.get('swipe').set({ 
  threshold: 10,
  velocity: 0.3 // 新增速度阈值，避免普通滚动被误判为swipe，可根据实际使用场景调整数值
});

hammertime.on('swipe', function(ev) {
  document.getElementById("abc").innerHTML = "works!" 
});

• 可选优化：如果仍存在滚动和swipe误判的问题，可以增加方向过滤逻辑，仅响应水平方向的swipe动作：

hammertime.on('swipe', function(ev) {
  if(ev.direction === Hammer.DIRECTION_LEFT || ev.direction === Hammer.DIRECTION_RIGHT) {
    document.getElementById("abc").innerHTML = "works!"
  }
});

内容的提问来源于stack exchange，提问作者Torpid