SVG onmouseover pour un groupe avec des éléments qui se chevauchent se produit deux fois

Question

Lorsque vous associez une fonction à l'événement onmouseover d'un groupe SVG <g>...</g>, l'événement se produit une fois, à chaque fois que le pointeur entre dans un élément du groupe.

Cela se produit même si deux éléments du groupe apparaissent l'un dans l'autre.

Par exemple:

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

Lorsque le pointeur entre dans le rectangle A et passe de là dans le rectangle B sans quitter G, les événements <=> sont déclenchés pour le groupe <=> qui contient <=> et < =>.

L'événement ne se produit qu'une fois, donc je ne pense pas qu'il soit lié à des événements en ébullition.

Je m'attendais à ce que le groupe soit traité comme un bloc solide afin de ne pas avoir à m'inquiéter de ses descendants lors de la définition de ses propres événements.

Avez-vous des solutions de rechange? Est-ce que je fais ça correctement? Y a-t-il un meilleur moyen?

Answer 1

Ça me semble familier, je pense que le bouillonnement va vous piquer dans de tels cas.

Quelques exemples de l'une de mes présentations SVG Open de 2008, notamment slide 17 devrait vous intéresser. Il se peut qu’avoir quelque chose comme les événements 'mouseenter' / 'mouseleave' résoudrait ce problème, mais ils ne font pas encore l’objet d’une recommandation W3C.

Modifier: Pour être clair, mouseenter et mouseleave sont dans le Evénements DOM niveau 3 brouillon de travail.

Answer 2

Vous pouvez vérifier l’élément dans lequel la souris était WAS. Si elle fait partie d’un certain groupe, ignorez l’événement de la souris. Comme si:

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

Voici un violon: http://jsfiddle.net/pFTfm/57/