Trigger event when mousemove stops-CodePudding

I have a menu i 3 levels.. basically, when you hover I want to open if there has not been any mouse movement for 500ms but I'm not sure how I should approach this..

my categoryNavComponent more or less contains the nav-item component..

 <ul >
    <li *ngFor="let category of categories">
      <nav-item [category]="category" (mouseenter)="openFirstLevel(category)">{{ category.title }}</nav-item>
    </li>
  </ul>

I kind of guess I should have move$ = fromEvent(document, 'mousemove'); and subscribe to that in the parent component?

Any ideas are most welcome :)

CodePudding user response：

// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener("mouseover", function( event ) {
  // highlight the mouseover target
  return;

  // reset the color after a short delay
  setTimeout(function() {
    // open your dropdown here.
  }, 500);
}, false);

maybe you need something like this.

CodePudding user response：

You can do something like this:

move$ = fromEvent(document, 'mousmove');
mouseInArea$ = new Subject()
canOpen$ = mouseInArea$.pipe(
  switchMap(() => move$.pipe(switchMap(() => timer(500))) )
);

openFirstLevel() {
  this.mouseInArea$.next() 
}