Angular Material卡片内按钮点击触发卡片事件的解决方法

问题根源在于按钮嵌套在带有click事件的mat-card内部，点击按钮时事件会向上冒泡到父元素mat-card，导致两个方法同时被调用。如果之前尝试event.stopPropagation()无效，大概率是没正确传递事件对象。

以下是两种可行的解决方法：

方法一：在模板中直接阻止事件冒泡 #

修改按钮的click绑定，传入事件对象并调用stopPropagation()：

<mat-card *ngFor="let p of products" (click)="viewProduct(p)">
    <mat-card-actions>
        <button mat-stroked-button (click)="addProductToCart(p); $event.stopPropagation()">Add to cart</button>
    </mat-card-actions>
</mat-card>

方法二：在组件方法中阻止事件冒泡 #

先在模板里把事件对象传递给方法：

<mat-card *ngFor="let p of products" (click)="viewProduct(p)">
    <mat-card-actions>
        <button mat-stroked-button (click)="addProductToCart(p, $event)">Add to cart</button>
    </mat-card-actions>
</mat-card>

然后在组件的addProductToCart方法里调用stopPropagation()：

addProductToCart(product: any, event: Event) {
    event.stopPropagation();
    // 你的添加购物车逻辑代码
}

多数场景下单独使用stopPropagation()就足够，若仍有异常可配合event.preventDefault()一起使用。

内容的提问来源于stack exchange，提问作者Honigeintopf