Mat-Table中列含href/点击事件时如何阻止触发行展开？

你遇到的问题核心是事件冒泡：行内的链接、按钮被点击时，点击事件会向上传递到绑定了展开逻辑的mat-row元素，最终触发了行展开的回调。你尝试添加的href="javascript:void(0);"仅能阻止a标签的默认跳转行为，不会阻断事件冒泡，因此无法解决问题。

以下是三种适配不同场景的解决方案：

方案1：直接在子元素点击事件中阻止冒泡（适合少量独立元素） #

给绑定了点击逻辑的按钮、a标签直接添加事件阻止逻辑，优先级最高、改动最小：

<!-- 按钮示例 -->
<button (click)="$event.stopPropagation(); openModal()">打开弹窗</button>

<!-- a标签示例 -->
<a href="xxx" (click)="$event.stopPropagation(); showAlert()">点击提示</a>

方案2：封装全局阻止冒泡指令（适合批量处理同类元素） #

如果行内有大量需要阻止冒泡的元素，可以封装一个通用指令批量复用：

1. 先创建指令文件：

// stop-click-propagation.directive.ts
import { Directive, HostListener } from '@angular/core';

@Directive({
  selector: '[stopBubble]'
})
export class StopClickBubbleDirective {
  @HostListener('click', ['$event'])
  onClick(e: PointerEvent) {
    e.stopPropagation();
  }
}

2. 在组件的NgModule的declarations中声明该指令后，直接给需要的元素加属性即可：

<a stopBubble href="xxx">链接</a>
<button stopBubble>操作按钮</button>

方案3：行展开逻辑增加点击源判断（适合不想修改子元素的场景） #

如果你不想逐个修改行内的子元素，可以直接在mat-row的点击回调里过滤可交互元素的点击事件：

1. 调整行的点击绑定：

<mat-row 
  *matRowDef="let row; columns: displayedColumns;"
  (click)="handleRowClick($event, row)"
  [class.example-expanded-row]="expandedElement === row"
>
</mat-row>

2. 在对应ts文件中增加判断逻辑：

handleRowClick(event: PointerEvent, row: any) {
  const target = event.target as HTMLElement;
  // 过滤所有可交互元素的点击
  const isInteractive = 
    ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName) || 
    !!target.closest('button, a, [role="button"]');
  
  if (isInteractive) return;
  // 非可交互元素点击才触发展开
  this.expandedElement = this.expandedElement === row ? null : row;
}

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