Hammer.js在Angular 5中实现单/双指左右滑动及鼠标触摸区分方案咨询

先直接给结论：你的需求100%可以通过Hammer.js结合Angular 5实现，核心是利用Hammer的事件属性区分操作类型，再通过手势配置或事件判断控制单双指的触发逻辑。

一、区分鼠标与触摸操作 #

Hammer.js的事件对象（HammerInput）自带pointerType属性，完美解决你说的鼠标maxPointers始终为1的区分问题：

• 鼠标操作：event.pointerType === 'mouse'
• 触摸操作：event.pointerType === 'touch'

在Angular组件的事件回调里直接判断即可，比如：

onSwipe(event: HammerInput) {
  if (event.pointerType === 'mouse') {
    // 鼠标专属逻辑
    this.handleMouseSwipe(event);
  } else {
    // 触摸专属逻辑
    this.handleTouchSwipe(event);
  }
}

二、兼容双指触摸+单指滑动（左右方向） #

这里分两种场景处理，既满足触摸优先双指的需求，也兼容单指左右滑：

方案1：在事件回调中动态判断指针数量 #

这种方式更灵活，不需要拆分手势配置：

handleTouchSwipe(event: HammerInput) {
  const pointerCount = event.pointers.length;
  
  // 双指触摸逻辑
  if (pointerCount === 2) {
    console.log('双指触摸滑动触发');
    // 你的双指操作逻辑，比如缩放+滑动组合等
  } 
  // 单指左右滑兼容逻辑
  else if (pointerCount === 1 && 
           [Hammer.DIRECTION_LEFT, Hammer.DIRECTION_RIGHT].includes(event.direction)) {
    console.log('单指触摸左右滑触发');
    // 你的单指左右滑逻辑，比如切换页面等
  }
}

方案2：拆分独立的手势识别器 #

如果想更严格地控制手势触发条件，可以为单双指分别创建Swipe识别器，避免逻辑混在一起：

import * as Hammer from 'hammerjs';
import { ElementRef, ViewChild } from '@angular/core';

@Component({
  // ...组件配置
})
export class YourComponent {
  @ViewChild('swipeTarget') swipeTarget!: ElementRef;

  ngAfterViewInit() {
    const targetElem = this.swipeTarget.nativeElement;
    const hammerInstance = new Hammer(targetElem);

    // 单指滑动识别器（支持鼠标+触摸单指）
    const singleFingerSwipe = new Hammer.Swipe({
      direction: Hammer.DIRECTION_HORIZONTAL,
      minPointers: 1,
      maxPointers: 1
    });

    // 双指触摸滑动识别器
    const doubleFingerSwipe = new Hammer.Swipe({
      direction: Hammer.DIRECTION_ALL, // 可根据需求修改方向
      minPointers: 2,
      maxPointers: 2
    });

    // 添加识别器到实例
    hammerInstance.add([singleFingerSwipe, doubleFingerSwipe]);

    // 监听单指滑动
    hammerInstance.on('swipe', (event) => {
      if (event.pointerType === 'mouse' || event.pointers.length === 1) {
        this.handleSingleFingerSwipe(event);
      }
    });

    // 监听双指滑动
    hammerInstance.on('swipe', (event) => {
      if (event.pointers.length === 2) {
        this.handleDoubleFingerSwipe(event);
      }
    });
  }

  private handleSingleFingerSwipe(event: HammerInput) {
    // 单指滑动逻辑
  }

  private handleDoubleFingerSwipe(event: HammerInput) {
    // 双指滑动逻辑
  }
}

三、Angular 5的配置注意事项 #

别忘了在Angular中配置Hammer手势，避免默认手势冲突：

1. 创建自定义Hammer配置类：

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

export class CustomHammerConfig extends HammerGestureConfig {
  overrides = {
    swipe: { direction: Hammer.DIRECTION_HORIZONTAL } // 全局默认只处理左右滑
  } as any;
}

2. 在组件的providers中注册：

@Component({
  // ...其他配置
  providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: CustomHammerConfig }]
})

这样就能完美实现你的所有需求啦！

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