Angular中点击事件触发后如何禁用mouseout事件监听器

我来帮你搞定这个需求！要实现点击菜单项后，阻止该元素的mouseout事件执行（也就是不再把图标切回默认状态），我们可以通过添加状态跟踪的方式来实现，具体步骤如下：

1. 在组件类中添加状态变量 #

首先，我们需要一个变量来记录哪些菜单项已经被点击过，用Set存储索引会比较高效：

// 组件类中定义状态变量
clickedMenuIndexes = new Set<number>();

2. 修改点击事件处理函数 #

在你的reDirectTo方法里，把当前点击的菜单项索引加入到集合中，标记它为已点击：

reDirectTo(route: string, routeTyPe: string, menuName: string, index: number, event: Event) {
  // 保留你原有的跳转逻辑代码...
  
  // 新增：标记当前菜单项为已点击
  this.clickedMenuIndexes.add(index);
}

3. 重构mouseout事件的处理逻辑 #

不能再直接在模板里写menu.src = menu.icon了，我们改成调用组件方法，在方法里判断是否要执行图标还原：

首先在组件类中添加这个处理方法：

handleMenuMouseOut(menu: any, index: number) {
  // 只有当前菜单项未被点击过，才执行图标还原操作
  if (!this.clickedMenuIndexes.has(index)) {
    menu.src = menu.icon;
  }
}

然后修改你的模板代码，把mouseout事件绑定到这个方法上：

<li class="ci-inline-flex ci-flt-l width100 tooltip ci-cursor" 
    *ngFor="let menu of menuData;let i=index" 
    [ngClass]="{ 'ci-bgclr-18 ci-border-radius-5': selectedItem == i, 'disabled': disabledVal == i, 'disabled': headerdisplay == false && menu.menuName == 'Encounter'}" 
    (click)="reDirectTo(menu.route,menu.routeTyPe, menu.menuName,i,$event)" 
    (mouseover)="menu.src = menu.activeIcon" 
    (mouseout)="handleMenuMouseOut(menu, i)" >

额外说明 #

如果后续需要重置这个状态（比如切换页面或重新加载菜单时），只需要清空集合即可：

this.clickedMenuIndexes.clear();

这样处理后，只要菜单项被点击过，它的mouseout事件就不会再执行图标还原操作，完全符合你的需求。

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