Angular7 拖放区：未触发点击事件

Question

在阅读了关于 angular material 7 个有关拖放交互的新功能的 blog post 之后，我决定研究示例代码。

它围绕三个列表工作，拖放事件在三个列表之间移动元素。这非常有效，当尝试修改第一个列表以使其元素变为按钮时出现问题：

<div *ngFor="let item of newItems" [cdkDragData]="item" cdkDrag>
<button (click)="clicked($event)"> {{ item }}</button>
</div>

问题是点击事件似乎没有被触发，就好像拖放事件有 "overwritten them"。

代码如下：

https://stackblitz.com/edit/mat-drag-drop-bwkdcy

编辑：找到了一个带有事件侦听器的解决方法，没什么大不了的。

Answer 1

尝试使用函数$event.stopPropagation()只触发这个事件

<div *ngFor="let item of newItems" [cdkDragData]="item" cdkDrag>
     <button (click)="$event.stopPropagation();clicked($event)"> {{ item }}</button>
</div>

Answer 2

(mousedown)="clicked($event)" 完成任务。

Angular7 拖放区：未触发点击事件

Angular7 drop zone: click event not triggered

angular

typescript

onclick

angular-material

angular7