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.
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.