如何让可点击表格行内的链接与提示图标仅触发自身点击事件

问题原因 #

这是典型的事件冒泡场景：子元素的点击事件会逐层向上传递给所有父级元素，点击行内链接时，事件最终会传递到<tr>标签，触发绑定的整行跳转方法navigate(i)。

解决方案 #

方案1：给行内可点击元素直接阻止冒泡（推荐） #

直接在链接的点击事件中调用stopPropagation()阻止事件向上传递，不会影响元素本身的点击逻辑，修改后的代码如下：

<tbody role="rowgroup">
   <tr role="row" class="fd-table--row" *ngFor="let myData of myList; index as i"
                    (click)="navigate(i)">
     <td role="cell" class="fd-table--cell">
          {{ rowData.statusContent }}
        <div *ngIf="myDataList[i].myAmount" class="my-class">
              <p [innerHTML]="myLabel + ': ' + myDataList[i].myAmount">
              </p>
              <!-- 新增click事件阻止冒泡，需要处理自身逻辑可以在后面追加方法 -->
              <a [attr.id]="mySelector" [attr.aria-describedby]="myTooltip"
                                href="javascript:void(0);" class="tooltip"
                                (click)="$event.stopPropagation()">
                 <my-icon [myIconId]="myIconId"></my-icon>
              </a>
           </div>
        </td>
    </tr>
</tbody>

如果链接需要处理自身的点击逻辑（比如显示悬浮提示），直接在stopPropagation()后追加对应的方法即可：

(click)="$event.stopPropagation(); yourCustomMethod()"

方案2：在整行跳转方法中做事件源判断 #

如果行内可点击元素较多，不想逐个加阻止冒泡，也可以在navigate方法里判断点击来源，跳过点击链接/图标时的跳转逻辑：

1. 先给tr的点击事件传递事件对象：

<tr role="row" class="fd-table--row" *ngFor="let myData of myList; index as i" (click)="navigate(i, $event)">

2. 修改navigate方法逻辑：

navigate(index: number, event: Event): void {
  const targetEl = event.target as HTMLElement;
  // 点击来源是提示链接/内部图标时，终止后续跳转逻辑
  if (targetEl.closest('a.tooltip')) {
    return;
  }
  // 原有整行跳转逻辑写在下方
  // ...
}

注意事项 #

不要混淆stopPropagation()和preventDefault()：前者是阻止事件向上冒泡，后者是阻止元素本身的默认行为（比如a标签的原生跳转），你的场景只需要用到前者即可。

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