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

Question

我在按钮内有一个垫子图标。按钮定义了一个事件，mat-icon 定义了另一个事件。当我点击 mat-icon 时，它的事件与按钮事件一起被触发，因为 mat-icon 在按钮标签内。我不希望在单击 mat-icon 时触发按钮事件，也不希望在单击按钮时触发 mat-icon（不包括 UI 中的 mat-icon 部分）。这是 angular 框架中 HTML 的片段。

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

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

Answer 1

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

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

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

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

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

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

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

Online_Demo

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

Disable button event when embedded mat icon is clicked

typescript

google-material-icons

angular