Undefined Title

Undefined Title

Detection of hover more than specified seconds with RxJS

Using RxJS, this entry intends similarly with a jQuery plugin, hoverIntent, aiming to detect hover event but doesn't immediately fire the event. It fires hover event if the mouse cursor has stayed on a point after specified milli seconds.

This uses three kinds of streams for mouse events, mouseenter, mouseleave and mousemove.

  • entered stream expresses a flag whether the mouse cursor is in areas to detect hover events. It can be generated to merge mouseenter and mouseleave simply mapping to boolean.

  • Combine move stream with the flag stream and debounce the move events with a duration (500 milli seconds in the below example). debounce doesn't fire any events while mouse is moving, so it prevents the stream from firing mouse move event.

  • The rest is easy to understand, just filter all evenths with false flag.

Here is an example. It would be helpful for me if you could tell me another way to do the same thing.