Raphael JS: mouseover/mouseout — проблема с текстовыми метками

Я использую Raphael JS для создания SVG-карты с областями и текстовыми метками. Я хочу, чтобы область выделялась, когда вы наводите на нее указатель мыши.

У меня это работает сейчас, но когда я навожу мышь на метку (в центре области), срабатывает событие mouseout для этой области, поэтому область снова не выделяется.

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


label mouseover raphael mouseout
person Dylan    schedule 15.06.2011    source источник
comment
Я использую jQuery с mouseenter и mouseleave, и он достаточно хорошо работает для SVG (используйте raphaelElement.node). Он может работать или не работать с IE/VML.   -  person    schedule 30.12.2012

Ответы (2)


arrow_upward
5
arrow_downward

Создайте прямоугольник с непрозрачностью, установленной на 0, над текстом и прикрепите обработчики событий к этому прямоугольнику. Вы можете рассчитать размеры прямоугольника, используя getBBox() текста.

person TigrisC    schedule 16.06.2011
comment
области представляют собой полигоны, поэтому прямоугольника недостаточно. Но я обнаружил, что, вероятно, могу использовать set для этого. Я создаю набор каждой области + метка и прикрепляю обработчик события к набору, а не к области - person Dylan; 16.06.2011

arrow_upward
2
arrow_downward

Создание набора с помощью Paper#set было подходом, который сработал для меня. например.:

var st = paper.set();

st.push.apply(st, vectors);  // `vectors`: my array of "hoverable" vectors
st.push(text);               // `text`:    my text vector for `vectors`

st.hover(function () {
    text.show();
}, function () {
    text.hide();
});
person Matt Huggins    schedule 26.03.2013