我有一个按钮和一个功能内的图标可以启动。如何在不触发图标的情况下拖动按钮？答案

【问题标题】：I have a button and an icon inside a function can be lauched with. How can I drag the button without triggering the icon?我有一个按钮和一个功能内的图标可以启动。如何在不触发图标的情况下拖动按钮？
【发布时间】：2026-01-23 22:10:01
【问题描述】：

如果我触摸图标并拖动按钮，则图标触发的功能一定不能启动。我必须做什么？

<div>
    <button type="button" class="fixed-button wobble" [style.background]="changeColorService.defaultStyles.firstDesignBackgroundColor" [appMovable]="true">
      <mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="!(changeKagListIcon)" (click)="openKagListDialog()" matTooltip="KAG-Liste öffnen" [appMovable]="true">dvr</mat-icon>
      <mat-icon [style.color]="changeColorService.defaultStyles.firstDesignFontColor" *ngIf="changeKagListIcon" (click)="dialog.closeAll()" matTooltip="KAG-Liste schließen" [appMovable]="true">close</mat-icon>
    </button>

【问题讨论】：

标签： javascript angular button event-handling mouse

【解决方案1】：

我不太清楚你的意思，但请考虑致电event.stopPropagation()。

    <button (click)="specialFnc()">
      <mat-icon (click)="$event.stopPropagation()"></mat-icon> 
    </button>

如果您单击该图标，则不会调用 specialFnc。因此，如果您喜欢这种行为，对于拖动事件 - 只需在所需点停止事件链即可。

我不知道[appMovable] 是哪个指令，但在拖动处理中你必须调用stopPropagation。

【讨论】：

【解决方案2】：

Javascript event.stopPropagation() 将帮助父元素 Onclick 事件上的子事件冒泡。

例子，

<button (onclick)="stopChildTrigger($event)">
   <mat-icon><mat-icon>
</button>

stopChildTrigger(e){
   e. stopPropagation();
}

【讨论】：