Question

在阅读有关角材料的blog post后，我决定使用有关拖放交互的7个新功能。

它围绕三个列表工作，其中拖放事件在三个列表之间移动元素。效果很好，尝试修改第一个列表以使其元素成为按钮时出现问题：

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

问题是单击事件似乎没有被触发，就好像拖放事件已“覆盖它们”一样。

代码如下：

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

编辑：找到了一个事件监听器的变通办法，没什么大不了的。

Answer 1

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

Answer 2

尝试使用$ event.stopPropagation（）函数仅触发此事件

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

Angular7放置区域：未触发点击事件

2 个答案: