如何避免点击HTML details内操作按钮时触发toggle事件？

核心问题是summary内的按钮点击事件会冒泡到summary，进而触发details的展开/折叠。通过阻止事件冒泡就能解决这个问题，具体实现如下：

修改后的代码 #

<details *ngIf="tree" class="form-control mb-2 mt-2" open style="width: 100%; margin-left: 12.5px">
  <summary>
    {{tree?.name}} <i class="bi" [ngClass]="'bi-gender-' + tree?.sex.toLowerCase()"></i>
    <div class="btn-group float-end">
      <span class="mt-1">{{tree?.dateOfBirth}}</span>
      <a [routerLink]="['/horses/detail', tree?.id]"
         class="btn btn-sm"
         (click)="$event.stopPropagation()">
        <i class="bi bi-info-lg"></i>
      </a>
      <a [routerLink]="['/horses/edit', tree?.id]"
         class="btn btn-sm"
         (click)="$event.stopPropagation()">
        <i class="bi bi-pencil"></i>
      </a>
      <a (click)="deleteHorse(); $event.stopPropagation()"
         class="btn btn-sm">
        <i class="bi bi-trash"></i>
      </a>
    </div>
  </summary>
  <app-node [tree]="tree?.father"></app-node>
  <app-node [tree]="tree?.mother"></app-node>
</details>

原理说明 #

• HTML事件默认会向上冒泡到父元素，点击summary内的按钮时，事件会传递到summary，触发details的toggle行为。
• 调用$event.stopPropagation()可以终止事件向上冒泡，这样按钮的点击只会执行自身的逻辑（路由跳转或删除操作），不会触发details的展开/折叠。
• 只有点击summary的非按钮区域（包括默认的黑色箭头）时，事件才会正常传递到summary，触发details的状态切换。

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