鼠标移动停止时触发事件：Angular三级菜单悬停延迟展开实现问询

核心思路说明 #

你需要实现的是「鼠标进入菜单项后连续500ms无移动才展开」，和普通的固定延迟悬停展开不同，必须通过监听鼠标移动事件重置计时触发条件，你一开始想到用fromEvent监听mousemove的方向完全可行，配合RxJS操作符可以非常简洁的实现该需求，不需要手动维护定时器id。

注意不要直接用mouseenter+固定setTimeout实现，该方案只要悬停时长达标就会展开，不管鼠标是否移动，不符合你的需求

具体实现步骤 #

1. 父组件逻辑编写 #

在categoryNavComponent中导入需要的RxJS依赖，声明相关流：

import { Component, OnInit, OnDestroy, ElementRef, ViewChild } from '@angular/core';
import { fromEvent, Subject, switchMap, debounceTime, takeUntil, map } from 'rxjs';
// 替换为你自己的分类实体类型
import type { Category } from './your-type-def';

@Component({
  // 你的组件原有元数据
})
export class CategoryNavComponent implements OnInit, OnDestroy {
  categories: Category[] = [];
  // 用于销毁订阅的信号流
  private destroy$ = new Subject<void>();
  // 存储当前鼠标悬停的分类
  private activeCategory$ = new Subject<Category | null>();
  // 可选：将监听范围缩小到导航容器，降低事件触发频率提升性能
  @ViewChild('navContainer') navContainer!: ElementRef<HTMLUListElement>;

  ngOnInit(): void {
    // 监听鼠标移动事件，如果你需要监听全局移动可替换为document
    const mouseMove$ = fromEvent(this.navContainer.nativeElement, 'mousemove');

    // 组合流实现核心逻辑
    this.activeCategory$.pipe(
      // 切换悬停分类时自动取消上一个分类的计时逻辑
      switchMap(category => {
        if (!category) return [];
        return mouseMove$.pipe(
          // 连续500ms没有鼠标移动事件才触发下游
          debounceTime(500),
          // 分类切换/组件销毁时自动取消订阅
          takeUntil(this.activeCategory$),
          takeUntil(this.destroy$),
          map(() => category)
        )
      })
    ).subscribe(category => {
      // 满足条件时执行菜单展开逻辑
      this.openFirstLevel(category);
    })
  }

  ngOnDestroy(): void {
    // 组件销毁时清理所有订阅，避免内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }

  openFirstLevel(category: Category): void {
    // 你原有的菜单展开逻辑
  }
}

2. 模板调整 #

给导航容器加模板引用，修改事件绑定：

<ul class="top" #navContainer>
  <li *ngFor="let category of categories">
    <nav-item 
      [category]="category" 
      (mouseenter)="activeCategory$.next(category)"
      (mouseleave)="activeCategory$.next(null)"
    >{{ category.title }}</nav-item>
  </li>
</ul>

可选优化方案 #

如果你的二级、三级菜单也需要相同的交互逻辑，可以把上述逻辑封装为 Angular 属性指令，直接在各级菜单项上复用，不需要每个组件重复写流逻辑：

• 指令接收delay输入参数自定义延迟时间
• 指令输出delayTrigger事件，满足条件时触发
• 使用时只需要给菜单项加[hoverDelay]="500" (delayTrigger)="openMenu()"即可

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