Swipe and click on links with Hammer js

Question

I have Angular 12 application.

There is carousel with images, which are links. I integrated Hammer JS as expected:

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 {}

I apply Hammer event handlers on the Carousel wrapper element like this:

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

And here comes the issue. Trying to swipe a link leads to default dragging behavior. The image is also causing similar default dragging behavior. A fix for that is to add css rule for both <img> and <a> dom elements:

img, a {
  pointer-events: none;
}

The swipe functionality for swiping the Carousel panes is working but now the click/tap event is not working because of pointer-events: none;

I know that there is Hammer configuration with the following interface:

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

My questions is: is it possible by applying specific configuration and css rules to have both swiping and clicking/tapping over link panes of the Carousel?

Thank you in advance.

Answer 1

maybe it is not so relevant, but still it is a solution for this case.

So, as quick summary of the case:

-1- I have an image carousel.
-2- I want to swipe the carousel horizontally.
-3- I want to scroll the page vertically event if I place the "finger" over the carousel.
-4- I want to click/tap over some carousel pane and navigate the link dedicated link.

The issue was with the 4-th point. In order to have swipe over link/images, I had to apply css rule:

img, a {
  pointer-events: none;
}

And that was preventing the navigation when the pane/link/image is clicked.

So, one solution is to trigger programmatic navigation in angular using:

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

Of course, the information is obtained on tap event with event.target information. Of course there might be other, more smart solutions. But, at least, this approach is working in very consistent way.