Angular 2+ - Как объединить события mouseover, mouseout и click на одном элементе?

Question

Я пытаюсь реализовать функциональность навигационной ссылки, при которой, если пользователь щелкает мышью вверх, она открывается, а если пользователь mousesout, то закрывается. Но также, если пользователь нажимает на ссылку, она переключается. Проблема, с которой я столкнулся, заключается в конфликте событий друг с другом, и это вызывает мерцание выпадающего меню. Переключатель щелчка закрывает его, но в то же время курсор мыши находится над ним, что указывает на открытие.

пример из реальной жизни - https://www.td.com/ca/en/personal-banking/ - как "продукты" или "решения" работают в nav.

Answer 1

1. Вы должны использовать mouseenter и mouseleave вместо ваших событий, чтобы они не срабатывали на вложенных тегах.
2. Я бы предложил создать Observable открытости, используя RxJ's fromEvent и объединяя все ваши события в одно 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(),
    );

В основном вы отображаете ввод в true и оставляете в false, и при нажатии вы переключаете предыдущее значение.