Angular 2+ - 如何在同一元素上组合 mouseover、mouseout 和 click 事件？

Question

我正在尝试实现一个导航链接功能，如果用户鼠标悬停它会打开，如果用户鼠标悬停，那么它会关闭。但如果用户点击链接，它也会切换它。我遇到的问题是事件相互冲突，它会导致导航下拉菜单闪烁。点击切换关闭它，但同时鼠标悬停在它上面表示打开。

现实生活中的例子 - https://www.td.com/ca/en/personal-banking/ - “产品”或“解决方案”在导航中的工作方式。

Answer 1

1. 您应该使用mouseenter 和mouseleave 而不是您的事件，这样它们就不会在嵌套标签上触发。
2. 我建议使用 RxJs 的 fromEvent 制作一个开放的 Observable，并将您的所有事件传递到一个生成的 boolean 中。

在这里，我为您制作了一个堆栈闪电战，以说明我的意思： https://stackblitz.com/edit/angular-4ntjhm?file=src%2Fapp%2Fhello.component.ts

可观察部分：

    const mouseenter$ = fromEvent(nativeElement, 'mouseenter');
    const mouseleave$ = fromEvent(nativeElement, 'mouseleave');
    const click$ = fromEvent(nativeElement, 'click');

    this.open$ = merge(
      mouseenter$.pipe(mapTo(true)),
      mouseleave$.pipe(mapTo(false)),
      click$.pipe(mapTo(null)),
    ).pipe(
      scan((acc, current) => current === null ? !acc : current, false),
      startWith(false),
      distinctUntilChanged(),
    );

基本上，您将 enter 映射为 true 并将 leave 映射为 false，然后单击切换上一个值。