Angular中routerLink嵌套问题：点击子元素仅触发onDelete而非路由跳转

这个问题我之前也碰到过，Angular里事件冒泡确实容易搞出这种小麻烦——点击删除图标时，事件会冒泡到外层带routerLink的div，导致既触发删除又跳页面。下面给你几个实用的解决方案：

方案一：阻止事件冒泡（最直接） #

在img的点击事件里添加$event.stopPropagation()，这样点击删除图标时，事件不会向上冒泡到父div，自然就不会触发路由跳转了：

<div class="list-group-item clearfix dictionaryItem" style="cursor:pointer" [routerLink]="[index]">
  <div class="pull-right">
    <img src="/assets/delete-icon.png" width="25" height="25" (click)="onDelete(); $event.stopPropagation()">
  </div>
</div>

方案二：使用Angular的事件修饰符（更简洁） #

Angular提供了事件修饰符stop，可以直接绑定在click事件上，效果和手动调用stopPropagation()一样，代码更干净：

<div class="list-group-item clearfix dictionaryItem" style="cursor:pointer" [routerLink]="[index]">
  <div class="pull-right">
    <img src="/assets/delete-icon.png" width="25" height="25" (click.stop)="onDelete()">
  </div>
</div>

方案三：调整DOM结构（从根源避免事件冒泡） #

如果不想处理事件冒泡逻辑，也可以把路由跳转的载体从父div移到专门的内容容器上，让删除图标完全独立出来，这样点击两个元素就不会互相干扰了：

<div class="list-group-item clearfix dictionaryItem" style="cursor:pointer">
  <!-- 把列表项内容放在这个带routerLink的容器里 -->
  <div [routerLink]="[index]" style="flex: 1;">
    <!-- 这里放置列表项的具体内容 -->
  </div>
  <div class="pull-right">
    <img src="/assets/delete-icon.png" width="25" height="25" (click)="onDelete()">
  </div>
</div>

方案四：手动控制路由跳转（适合复杂场景） #

如果需要在跳转前做额外逻辑判断，也可以去掉父元素的routerLink，改成在父元素的点击事件里手动调用路由跳转，同时判断点击目标是不是删除图标：

<div class="list-group-item clearfix dictionaryItem" style="cursor:pointer" (click)="onItemClick($event, index)">
  <div class="pull-right">
    <img src="/assets/delete-icon.png" width="25" height="25" (click)="onDelete()">
  </div>
</div>

然后在组件类中添加对应方法：

import { Router } from '@angular/router';

constructor(private router: Router) {}

onItemClick(event: MouseEvent, index: number) {
  // 判断点击目标是否属于删除按钮区域
  if (!(event.target as HTMLElement).closest('.pull-right')) {
    this.router.navigate([index]);
  }
}

这个方案适合需要在跳转前做权限校验、数据预处理等额外操作的场景。

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