SVG onmouseover para grupo con elementos superpuestos ocurre dos veces

Question

Al adjuntar una función al onmouseover evento para un grupo SVG <g>...</g>, el evento ocurre una vez, cada vez que el puntero ingresa a un elemento del grupo.

Esto ocurre incluso si dos elementos del grupo aparecen uno dentro del otro.

Por ejemplo:

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

Cuando el puntero entra en el A rectángulo, y desde allí se mueve al B rectángulo sin salir A, el onmouseover Se activan eventos para el grupo. G que contiene ambos A y B.

El evento ocurre sólo una vez, por lo que no creo que se relacione con eventos burbujeantes.

Esperaba que el grupo fuera tratado como un bloque sólido, para no tener que preocuparme por sus descendientes al establecer sus propios eventos.

¿Alguna solución alternativa?¿Estoy haciendo eso correctamente?¿Existe una mejor manera?

Answer 1

Suena familiar, creo que el burbujeo te molestará en tales casos.

Algunos ejemplos de una de mis presentaciones del SVG Open en 2008, en particular diapositiva 17 debería ser de interés.Podría ser que tener algo como eventos 'mouseenter'/'mouseleave' solucionaría esto, pero aún no están en una recomendación del w3c.

Editar: Para ser claro mouseenter y mouseleave estan en el Eventos de nivel DOM 3 borrador de trabajo.

Answer 2

Puede verificar en qué elemento estaba el mouse. Si es parte de un grupo determinado, ignore el evento del mouse. Me gusta así:

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

Aquí hay un violín: http://jsfiddle.net/pFTfm/57/