Question

我在按钮内有一个垫子图标。 Button定义了一个事件，而mat-icon定义了另一个事件。当我单击mat-icon时，其事件与按钮事件一起触发，因为mat-icon位于button标记内。我不希望单击Mat-icon时触发按钮事件，也不希望单击UI时不包括Mat-icon部分的单击按钮时触发Mat-icon。这是角度框架中的HTML片段。

<button type="button" class="" (click)="someevent">
            <span >
              Text
            </span>
            <mat-icon  class='' (click)="differentevent">
                       delete
            </mat-icon>
</button>

该如何解决？我正在使用Angular，而点击事件是在打字稿中定义的。

Answer 1

您可以使用$event.stopPropagation()：

event.stopPropagation()方法停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

只需将mat-icon标记替换为：

<mat-icon (click)="$event.stopPropagation(); differentevent()">delete</mat-icon>

因此，当您单击删除图标时，它将停止事件冒泡，因此不会调用您的父click事件，然后会调用下一个方法。

stopPropagation()的顺序并不重要-您也可以将其用作：

<mat-icon (click)="differentevent(); $event.stopPropagation()">delete</mat-icon>

Online_Demo

单击嵌入式垫图标时禁用按钮事件

1 个答案: