拖动后触发单击事件

Question

嘿，我正在使用 Angular 材质拖放。一切工作正常，但每次拖动后都会触发点击事件，这真的很烦人。我怎样才能阻止这个？

<div
  cdkDrag
  [cdkDragDisabled]="shiftWorker.locked"
  (cdkDragEnded)="onDragEnded(job, shiftWorker, $event)"
  (cdkDragStarted)="onDragStart($event)"
  [cdkDragData]="job"
  *ngIf="job.timelineInfo.isInDayShift === firstHalfDay"
  (click)="openWorkDetails(job.id)"
></div>

Answer 1

您可以使用布尔值来跟踪这种情况：

 var dragging = false;
 (cdkDragStarted): function(event, ui) {
    dragging = true;
    ...your code
 }

(click): function(event) {
    if (!dragging) {
        ...your code
    }
    else {
        dragging = false;
    }
});

Answer 2

在拖动元素时关闭元素的指针事件可以防止随后发生单击事件：

模板：

<div cdkDrag #draggable="cdkDrag" 
     [class.pointer-events-none]="draggable._dragRef.isDragging()" ...

样式.scss：

.pointer-events-none {
  pointer-events: none;
}