Geek Answers Handbook

SVG onmouseover for a group with overlapping elements occurs twice

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

This happens even if two elements in a group appear inside each other.

For instance:

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

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

An event occurs only once, so I do not think that this is due to the bubbling events.

I expected the group to be seen as a solid block, so I would not have to worry about my descendants when setting up my own events.

Any work around? Am I doing it right? Is there a better way?

+4
source share
2 answers

It sounds familiar, I think the bubble 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 is possible that something like the "mouseenter" / "mouseleave" events will resolve this, but they are not yet in the w3c recommendation.

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

+4
source

You can check which element the mouse is in. If part of a certain group ignores the mouse event. For instance:

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

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

0
source

More articles:


All Articles