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.
[ngStyle]
wherepointer-events
is none if not swiped and after swipe is done turnpointer-events
back to auto?