滑动并点击 Hammer js 链接

Question

我有 Angular 12 应用程序。

有带有图像的轮播，它们是链接。 我按照预期集成了 Hammer JS：

import * as Hammer from 'hammerjs';

export class HammerConfig extends HammerGestureConfig {
  overrides = {
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
  ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

我在 Carousel 包装器 元素上应用 Hammer 事件处理程序，如下所示：

<div
  class="slides"
  (swipeleft)="swipeLeft($event)"
  (swiperight)="swipeRight($event)"
  (tap)="tap($event)"
  [style.touch-action]="'pan-y'"
>

问题来了。尝试滑动链接会导致默认的拖动行为。 该图像也会导致类似的默认拖动行为。 解决此问题的方法是为 和 dom 元素添加 css 规则：

img, a {
  pointer-events: none;
}

用于滑动轮播窗格的滑动功能正在运行 但现在 click/tap 事件不起作用，因为 pointer-events: none;

我知道 Hammer 配置具有以下界面：

class HammerGestureConfig {
  events: string[]
  overrides: {...}
  options?: {...}
  buildHammer(element: HTMLElement): HammerInstance
}

我的问题是：是吗通过应用特定的配置和 CSS 规则可以实现 在轮播的链接窗格上滑动和单击/点击？

先感谢您。

Answer 1

也许它不是那么重要，但是它仍然是解决这种情况的解决方案。

因此，作为案例的快速摘要：

-1-我有一个图像旋转木马。
-2-我想水平滑动。
-3-我想卷轴如果我将“手指”放在旋转木马上，则垂直事件。
-4-我想单击/点击一些轮播窗格并导航链接专用链接。

问题是 4-th 点。
为了使链接/images 滑动，我必须应用css规则：

img, a {
  pointer-events: none;
}

这是在单击窗格/链接/图像时阻止导航的。

因此，一种解决方案是在Angular中触发程序化导航使用：

this.router.navigate(['some_route'])
// or
this.router.navigateByUrl('/some_route')

当然，该信息是通过点击事件获得的 event.target信息。
当然，可能还有其他更智能的解决方案。但是，至少这种方法以非常一致的方式起作用。