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 binations 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 e 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, bined with a call to stopPropagation() seems to work very well. Here is a JSFiddle to show the working solution.

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 binations 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 e 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, bined with a call to stopPropagation() seems to work very well. Here is a JSFiddle to show the working solution.

• javascript
• html
• mouseover
• mousemove
• nested

Share Improve this question Follow edited May 8, 2014 at 13:02 mhelvens asked May 8, 2014 at 12:25 mhelvensmhelvens 4,33344 gold badges3636 silver badges5757 bronze badges 1

• Thanks for this. I was struggling with a similar problem. Your solution helped. – Sidd Commented May 28, 2020 at 12:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use the event stopPropagation() method:

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

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

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

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

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

For non-IE browsers & IE >= 9 use,

    evt.stopPropagation();

For Legacy IE browsers(IE<9) browsers use,

    evt.cancelBubble = true;

This will prevent bubbling of events to parent elements.