如何点击mat-label时阻止details元素展开？

问题核心在于summary的点击默认会触发details展开，即便在mat-form-field或mat-label上调用$event.stopPropagation()，也可能因事件传播机制、Angular组件内部事件处理逻辑，无法阻止这一默认行为。以下是可行的解决方法：

方法一：在summary上拦截点击事件 #

通过在summary的点击事件中判断点击目标是否属于表单区域，针对性阻止默认行为并聚焦输入框：

模板代码 #

<details>
  <summary (click)="handleSummaryClick($event)">
    <mat-form-field>
      <mat-label>First Name</mat-label>
      <input matInput value="Marvel" />
    </mat-form-field>
  </summary>
  details
</details>

组件类代码 #

handleSummaryClick(event: MouseEvent) {
  const target = event.target as HTMLElement;
  // 检查点击目标是否在mat-form-field内部
  const formField = target.closest('mat-form-field');
  if (formField) {
    // 阻止事件冒泡和默认行为（默认行为即展开details）
    event.stopPropagation();
    event.preventDefault();
    // 主动聚焦输入框，匹配用户操作预期
    const input = formField.querySelector('input[matInput]') as HTMLInputElement;
    input?.focus();
  }
}

方法二：模板内直接处理（无需组件方法） #

如果不想额外添加组件方法，也可以在模板内直接完成逻辑：

<details>
  <summary 
    (click)="$event.target.closest('mat-form-field') && 
      ($event.stopPropagation(), 
       $event.preventDefault(), 
       $event.target.closest('mat-form-field').querySelector('input[matInput]')?.focus())"
  >
    <mat-form-field>
      <mat-label>First Name</mat-label>
      <input matInput value="Marvel" />
    </mat-form-field>
  </summary>
  details
</details>

核心原理 #

details的展开是summary点击的默认行为，仅阻止事件冒泡（stopPropagation()）无法取消这一动作。必须同时调用preventDefault()来阻止summary的默认展开行为，再主动聚焦输入框，满足用户操作预期。

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