猫头鹰旋转木马防止点击拖动

Question

我在 Angular 中使用ngx-owl-carousel-o库。每个轮播项目都被创建为一个带有（点击）事件的 div。我遇到的问题是，在拖动轮播时，它总是会不合需要地触发点击事件，即点击应该只在不拖动时触发。

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

我已经制定了一个似乎有效的解决方案，但我不确定它是否适合使用setTimeout. 我基本上只是用它来延迟结束on_carouselDrag以确保on_vendorSelected首先触发。

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

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

如果可以改进这种方法，将不胜感激。

Answer 1

我使用了类似的计时器解决方案来防止单击拖动 - 但我在各个轮播元素上有一个简单的“onclick”。我使用插件触发器来确定拖动何时开始和结束：

<div onclick="if(owl_is_dragging){ return; } do_something_otherwise();">

<script>
    let owl_is_dragging = false;
    
     $(document).ready(function(){
    
            // Owl-carousels
            let owl = $('.owl-carousel');
    
            owl.on('drag.owl.carousel', function(event) {// bound to 'this.trigger("drag")'
                owl_is_dragging = true;
            });
    
            owl.on('dragged.owl.carousel', function(event) {// bound to 'this.trigger("dragged")'
                setTimeout(function() {
                    owl_is_dragging = false;
                }, 100);
    
            });
    });

</script>

我认为还有许多其他定制解决方案。就像 mousedown/touchstart/mouseup/touchend 上的计时器一样，它可以简单地确定事件是否确实是单击或拖动。可以使用其他拖动检测。但可以肯定的是，内置的 owl 全局变量如“isdragging”“isdonedragging”或“preventClickOnDrag”可能会有所帮助。