如何在Ionic Angular项目中正确使用HammerJS触发手势事件

1. 检查hammerjs全局导入配置 #

仅在组件内局部导入hammerjs不会全局生效，需按以下任意一种方式全局引入：

• 方式1：在项目入口main.ts顶部添加导入

import 'hammerjs';

• 方式2：在angular.json的build.options.scripts数组中添加hammerjs路径

"scripts": [
  "node_modules/hammerjs/hammer.min.js"
]

修改后需重启开发服务生效。

2. 排查Ionic手势拦截问题 #

Ionic内置的手势系统和滚动容器会默认拦截触摸事件，可通过以下配置排除冲突：

• 若滑动元素在<ion-content>内部，先临时给<ion-content>添加[scrollY]="false"测试是否是滚动拦截导致
• 给绑定swipe事件的元素添加CSS样式，放开水平手势权限：

.swipe-element {
  touch-action: pan-y; /* 仅交给系统处理垂直滚动，水平手势留给Hammer识别 */
  position: relative;
  z-index: 10; /* 避免被其他透明元素遮挡拦截事件 */
}

3. 自定义Hammer手势识别配置 #

默认的Hammer识别阈值较高、方向限制可能导致滑动不触发，需在模块中注入自定义配置：

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import * as Hammer from 'hammerjs';

export class CustomHammerConfig extends HammerGestureConfig {
  override overrides = {
    swipe: { 
      direction: Hammer.DIRECTION_HORIZONTAL, // 仅识别水平滑动
      threshold: 10, // 最小滑动距离，默认30，调低更容易触发
      velocity: 0.3 // 最小滑动速度，默认0.4，调低更容易触发
    }
  }
}

// 在模块的providers数组中添加配置
@NgModule({
  // ...
  providers: [
    { provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }
  ]
})

4. 排除模板参数和事件绑定问题 #

先简化测试用例，避免参数未定义导致的事件绑定失效：

<!-- 先写死参数测试事件是否能触发 -->
<div (swipeleft)="onswipe(1)" style="width: 200px; height: 100px; background: #eee;">
  swipe me
</div>

5. 原生Hammer实例测试 #

在组件中手动初始化Hammer实例，排查是Hammer本身的问题还是Angular绑定层的问题：

import * as Hammer from 'hammerjs';

ngAfterViewInit() {
  const targetEl = document.querySelector('.swipe-element');
  const hammerIns = new Hammer(targetEl as HTMLElement);
  hammerIns.on('swipeleft', () => {
    console.log('原生swipeleft事件触发');
  });
}

• 若原生实例能触发事件：说明是Angular的HammerModule配置问题，回头检查模块导入和手势配置即可
• 若原生实例也不能触发：说明元素被遮挡、或者上层元素阻止了触摸事件冒泡，调整层级和触摸事件权限即可。

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