Question

嘿，我正在使用Angular材质拖放。一切工作正常，但每次拖动后都会触发click事件，这确实很烦人。我该如何阻止呢？

<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

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

模板：

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

styles.scss：

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

Answer 2

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

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

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

拖动后触发点击事件

2 个答案: