SVG onmouseover for group with overlapping elements occurs twice

Question

When attaching a function to the onmouseover event for an SVG group <g>...</g>, the event occurs once, each time the pointer enters to an element in the group.

This occurs even if two elements in the group appears one inside another.

For example:

+-----+
|A ___|
|  |B |
|__|__|

When the pointer enters the A rectangle, and from there moves to the B rectangle without leaving A, the onmouseover events is triggered for the group G which contains both A and B.

The event occurs only once, so I don't think it relates to events bubbling.

I expected the group to to be treated as a solid block, so that I won't have to worry about its descendants when setting its own events.

Any work-around? Am I doing that correctly? Is there a better way?

Answer 1

Sounds familiar, I think the bubbling will bite you in such cases.

Some examples from one of my SVG Open presentations in 2008, in particular slide 17 should be of interest. It might be that having something like 'mouseenter'/'mouseleave' events would solve this, but they're not yet in a w3c recommendation.

Edit: To be clear mouseenter and mouseleave are in the DOM Level 3 Events working draft.

Answer 2

You can check which element the mouse WAS in. If its part of a certain group, then ignore the mouse event. Like so:

function isRelated(e) { 
    if ($(e.relatedTarget).closest('#rect1,#rect2).length == 0) { //http://api.jquery.com/closest/
        return false;
    }
    return true;
}

Here is a fiddle: http://jsfiddle.net/pFTfm/57/