Properly keeping track of which (nested) div has mouse-over

Question

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.

Answer 1

You can use the event stopPropagation() method:

https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation

If using jQuery, try calling stopPropagation() on the event passed as the first parameter

http://api.jquery.com/event.stoppropagation/

$( "p" ).on('mouseover', function( event ) {
  event.stopPropagation();
  // Do something
});

Also, you can check which element is the target, as in event.target.