如何使用 Hammerjs 保持默认浏览器行为（缩放）？

Question

我使用 Hammerjs 进行滑动和点击。然而，一旦我开始在任何元素上使用它

var hammer = new Hammer(document.getElementById("square"));

默认浏览器的“捏”手势（放大或缩小）行为停止工作。

由于我不需要任何自定义处理捏合，我尝试像这样禁用事件识别器：

hammer.get("pinch").set({enable: false});

没有运气。下面的jsfiddle说明了这个问题。

如何保留“滑动”处理程序并让浏览器在捏合时完成其工作？

Answer 1

正如这个问题

中指出的那样

{touchAction : "auto"}

是要走的路。这是更正后的 jsfiddle。

Answer 2

配置 Hammer 时需要定义一个 touchAction 例如。

      touchAction: "auto"

在某些情况下还有一个 inputClass

      inputClass: Hammer.TouchInput

同时保留默认浏览器行为。

例如，使用 Angular 您可以创建这样的配置：

export class MyHammerConfig extends HammerGestureConfig {
  override buildHammer = (element: HTMLElement) => {
    const mc = new Hammer(element, {
      touchAction: "auto",
      inputClass: Hammer.TouchInput,
    });
    return mc;
  };

  override overrides = <never>{
    'swipe': {
      enable: true,
      direction: Hammer.DIRECTION_HORIZONTAL
    },
  }
}

并将其提供给 @NgModule 提供者：

  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig
    }
  ],