SVG onmouseover for group with overlapping elements occurs twice

Question

When attaching a function to the onmouseover event for an SVG group ..., the event occurs once, each time the pointer enters to

Answer 1

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/

Answer 2

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.