SVG-перестановка для группы с перекрывающимися элементами происходит дважды

Question

При присоединении функции к событию onmouseover для группы SVG <g>...</g> событие происходит один раз, каждый раз, когда указатель входит в элемент в группе.

Это происходит, даже если два элемента в группе появляются один внутри другого.

Например:

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

Когда указатель входит в прямоугольник A и оттуда перемещается в прямоугольник B, не покидая G, события <=> запускаются для группы <=>, которая содержит как <=>, так и < =>.

Событие происходит только один раз, поэтому я не думаю, что оно связано с пузырями событий.

Я ожидал, что группа будет рассматриваться как сплошной блок, поэтому мне не придется беспокоиться о ее потомках при настройке собственных событий.

Любой обходной путь? Я правильно это делаю? Есть ли лучший способ?

Answer 1

Звучит знакомо, я думаю, что пузырьки будут кусать вас в таких случаях.

Некоторые примеры из одной из моих презентаций SVG Open в 2008 году, в частности слайд 17 должно быть интересно. Возможно, что что-то вроде событий mouseenter / mouseleave решит эту проблему, но они еще не включены в рекомендацию w3c.

Изменить . Чтобы быть понятным, mouseenter и mouseleave находятся в События DOM уровня 3 рабочий проект.

Answer 2

Вы можете проверить, в каком элементе была мышь. Если она входит в определенную группу, игнорируйте событие мыши. Вот так:

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

Вот скрипка: http://jsfiddle.net/pFTfm/57/