en.javascript.info/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/solution.md
Ilya Kantor fc84391bd2 up
2017-03-09 00:48:54 +03:00

18 lines
1 KiB
Markdown

The algorithm looks simple:
1. Put `onmouseover/out` handlers on the element. Also can use `onmouseenter/leave` here, but they are less universal, won't work if we introduce delegation.
2. When a mouse cursor entered the element, start measuring the speed on `mousemove`.
3. If the speed is slow, then run `over`.
4. Later if we're out of the element, and `over` was executed, run `out`.
The question is: "How to measure the speed?"
The first idea would be: to run our function every `100ms` and measure the distance between previous and new coordinates. If it's small, then the speed is small.
Unfortunately, there's no way to get "current mouse coordinates" in JavaScript. There's no function like `getCurrentMouseCoordinates()`.
The only way to get coordinates is to listen to mouse events, like `mousemove`.
So we can set a handler on `mousemove` to track coordinates and remember them. Then we can compare them, once per `100ms`.
P.S. Please note: the solution tests use `dispatchEvent` to see if the tooltip works right.