Рафаэль и IE. Обход мыши

Question

Я столкнулся с проблемой использования Raphael для SVG-эффектов в браузере IE. При наведении курсора мыши на объект анимация происходит, как и ожидалось. Однако при mouseout действие mouseout никогда не вызывается, поэтому объект (ы) застрял в состоянии наведения мыши.

Я видел, как другие жаловались на эту проблему в прошлом, но единственное решение, которое я видел, было заставить событие наведения мыши на каждом объекте возвращать все! = Текущий объект в их нормальное состояние. Я бы предпочел не делать общий «сброс всего», потому что у меня довольно много объектов, поэтому мне интересно, есть ли у кого-нибудь альтернатива, которую они могут предложить. Я думал о сохранении последнего объекта с последним наведенным курсором мыши в переменной и только обнулении этого при каждом наведении курсора, который мог бы работать ...

Answer 1

Начиная с Raphael 2.0.2, в Raphael и Internet Explorer (все версии) существовала проблема, когда различные манипуляции с путем, такие как сброс преобразования, .toFront() или .toBack(), вызывались из hover() во время зависания.вызывает бесконечные циклы наведения мыши и / или пропускает зависания.

Хотя hover в основном работает нормально в IE для mouseout, я обнаружил, что есть несколько вещей, которые могут сбить его с толку, вызываяа) игнорировать указатели мыши, как вы описали, и б) рекурсивно инициировать событие наведения мыши, так что если вы поместите туда console.log, консоль инструментов разработчика IE сломается и станет серой ... что иногда, кажется, также останавливает распознавание указателей мыши.

Вот вещи, с которыми я столкнулся, которые вызывают это:

• Сброс преобразования, из-за которого элемент перемещается из-под мыши, затем повторное его применение, помещая элементназад под курсором.non-IE продолжает, как будто ничего не происходит, и работает нормально, IE волнуется, как описано выше.
• .toFront () и .toBack () - non-IE распознает перемещенный элемент как тот же элемент в том же самомПоложение XY, IE волнуется, как описано выше.

Есть некоторые наблюдения и демонстрации в this jsfiddle (читать и раскомментировать различные комментарии).

Хороший обходной путь - использовать какой-нибудь флаг, например, например: path.data ('hoverIn', true); on mouse in and 'path.data( 'hoverIn', false ); при наведении мыши, затем обернуть любые .toFront() или нарушающие преобразования впроверьте это !path.data( 'hoverIn' ), чтобы оно могло произойти только один раз, пока не произойдет отключение мыши.Или сохраните ссылку на самый последний обнаруженный путь где-то после toFront() или чего-либо еще, затем не toFront() или что-либо еще, если этот путь также является последним наведенным.

Answer 2

У меня была та же проблема (карта с регионами, которые меняли фон при наведении курсора), и для меня в IE9 / Opera был заключен договор о сделке, заключающийся в методе toFront (). Я удалил это, и он отлично работает.

Answer 3

Я обошел это ограничение, поместив код в анонимную функцию, а затем вызвав его через setTimeout в обработчике событий.

Answer 4

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