Owl Carousel Prevent Click on Drag

Viewed 664

I'm using the ngx-owl-carousel-o library in Angular. Each carousel item is created as a div with a (click) event. The problem I had is that when dragging the carousel it would always trigger the click event undesirably i.e click should only trigger when not dragging.

<owl-carousel-o [options]="customOptions" (dragging)="on_carouselDrag($event.dragging)">
    <ng-container *ngFor="let item of items">
        <ng-template carouselSlide>
            <div (click)="on_itemSelected(item)">
                <!-- ... -->
            </div>
        </ng-template>
    </ng-container>
</owl-carousel-o>

I've made a solution that seems to work but I'm unsure if its an appropriate application for using setTimeout. I'm basically just using it to delay the end of the on_carouselDrag to make sure the on_vendorSelected triggers first.

on_itemSelected(item: string): void {
  if(!this.isDragging){
    // ...
  }
}

on_carouselDrag(dragging: boolean){
  setTimeout(() => {
    this.isDragging = dragging;
  }, 10 )
}

Any comments if this approach could be improved would be appreciated.

0 Answers
Related