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.