Why can't I reliably capture a mouseout event?

Question

I need to know when the mouse cursor leaves a div. So I hook up the mouseout event. However, if I move the mouse very quickly out of the div<

Answer 1

Here's a simple workaround.

In your onMouseOver listener, you can add a 'mousemove' listener to the window:

 {
    setMouseOver(true)

    let checkMouseLeave = (e: MouseEvent) => {
        if (rootRef.current
            && !rootRef.current.contains(e.target as HTMLElement)) {
            setMouseOver(false)
            window.removeEventListener('mousemove', checkMouseLeave)
        }
    }

    window.addEventListener('mousemove', checkMouseLeave)
}
>

Then you can check on each mouse move until the mouse is outside of your div (rootRef.current in our example).