Mat Card绑定点击事件致右侧按钮失效问题求助

下面两种方法都能解决你的问题，选哪种看你偏好：

方法一：阻止按钮事件冒泡（最直接） #

把跳转事件绑定到整个mat-card上，然后给右侧的更多按钮添加事件阻止冒泡，避免点击按钮时触发卡片的跳转逻辑：

<section class="recipe" *ngFor="let recipe of cookbook">
  <mat-card class="recipe__card" (click)="getRecipe(recipe.id)">
    <mat-card-content class="recipe__card-content">
      <span class="recipe__title">{{recipe.title}}</span>
      <button mat-icon-button [matMenuTriggerFor]="menu" class="recipe__more-btn" (click)="$event.stopPropagation()">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <span>Edit</span>
        </button>
        <button mat-menu-item (click)="deleteRecipe(recipe.id)">
          <span>Delete</span>
        </button>
      </mat-menu>
    </mat-card-content>
  </mat-card>
</section>

原理很简单：点击按钮时，默认事件会向上冒泡到父元素（这里就是mat-card），加上$event.stopPropagation()就能切断这个冒泡过程，按钮的菜单功能不受影响，卡片的其他区域点击依然能触发跳转。

方法二：用CSS扩展可点击区域 #

如果不想改事件逻辑，也可以通过CSS让标题区域铺满整个卡片，同时把按钮放在上层，这样点击卡片空白处相当于点标题，按钮还是正常可用：

先加CSS样式：

.recipe__card {
  position: relative;
}

.recipe__title {
  display: block;
  width: 100%;
  height: 100%;
  padding-right: 48px; /* 给右侧按钮留空间，避免点击区域覆盖按钮 */
  cursor: pointer;
}

.recipe__more-btn {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 1; /* 确保按钮在标题上方，不被标题的点击区域覆盖 */
}

HTML保持原来的结构就行，只需要保留标题上的点击事件：

<section class="recipe" *ngFor="let recipe of cookbook">
  <mat-card class="recipe__card">
    <mat-card-content class="recipe__card-content">
      <span class="recipe__title" (click)="getRecipe(recipe.id)">{{recipe.title}}</span>
      <button mat-icon-button [matMenuTriggerFor]="menu" class="recipe__more-btn">
        <mat-icon>more_vert</mat-icon>
      </button>
      <mat-menu #menu="matMenu">
        <button mat-menu-item>
          <span>Edit</span>
        </button>
        <button mat-menu-item (click)="deleteRecipe(recipe.id)">
          <span>Delete</span>
        </button>
      </mat-menu>
    </mat-card-content>
  </mat-card>
</section>

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