用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'"
>

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

img, a {
pointer-events: none;
}

滑动旋转木马窗格的滑动功能正在工作但由于pointer-events: none;，点击/点击事件现在不起作用

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

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

我的问题是：是否可以通过应用特定的配置和css规则在旋转木马的链接窗格上滑动和点击/点击？

提前谢谢。

Answer 1

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

因此，作为案例的快速总结：

-1-我有一个图像转盘
-2-我想水平滑动转盘
-3-如果我放置"；手指；在旋转木马上
-4-我想点击/点击某个转盘窗格并浏览链接专用链接

问题与第4个点有关。为了浏览链接/图像，我必须应用css规则：

img, a {
pointer-events: none;
}

当点击窗格/链接/图像时，这会阻止导航。

因此，一种解决方案是使用触发角度中的程序导航

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

当然，该信息是在具有event.target信息的tap event上获得的。当然，可能还有其他更聪明的解决方案。但是，至少，这种方法正在以非常一致的方式发挥作用。