I have a (deeply) nested structure of <div>
s. With Javascript, I'd like to keep track of which element the mouse is currently over (i.e., 'has focus'), where more deeply nested elements have priority:
I've tried combinations of mouseover
, mouseout
, mouseenter
, mouseleave
and mousemove
, but there seems to be no simple solution that gives me the expected behavior. I am able to receive mouse-events on the right divs, but often these events are subsequently received by higher level divs, which would then undeservedly take focus.
For example, in the transition above from a
to c
, the event might then be received by b
last, unintentionally giving focus to b
rather than c
. Or the transition from c
to b
might not be registered at all for some reason.
I don't understand the underlying mechanism of mouse-event propagation well enough to come up with a reliable solution. It seems like it should be such a simple thing, but I can't figure it out.
I've been able to get it to work as follows: when a div receives a mouseenter
/over
event, flag it and search the entire DOM subtree. If any other flags are found deeper down, relinquish focus. But this is rather crude, and I can't help but think there must be an easier way.
Edit: Solution
The use of mouseover
and mouseout
, combined with a call to stopPropagation()
seems to work very well. Here is a JSFiddle to show the working solution.