Рафаэль и IE. Обход мыши
Я столкнулся с проблемой использования Raphael для SVG-эффектов в браузере IE. При наведении курсора мыши на объект анимация происходит, как и ожидалось Однако при mouseout действие mouseout никогда не вызывается, поэтому объект (ы) застрял в состоянии наведения мыши.
Я видел, как другие жаловались на эту проблему в прошлом, но единственное решение, которое я видел, было заставить событие наведения мыши на каждом объекте возвращать все!= Текущий объект в их нормальное состояние. Я бы предпочел не делать общий "сброс всего", потому что у меня довольно много объектов, поэтому мне интересно, есть ли у кого-нибудь альтернатива, которую они могут предложить. Я думал о сохранении последнего объекта с последним наведенным курсором мыши в переменной и только обнулении этого при каждом наведении курсора, который мог работать....
4 ответа
Начиная с Raphael 2.0.2, в Raphael и Internet Explorer (все версии) существовала проблема, связанная с различными манипуляциями с путями, такими как сброс преобразования, .toFront(), или же .toBack() звонил из hover() в то время как зависание может привести к бесконечному циклу наведения и / или пропуску зависания.
В то время как hover в IE в основном работает нормально для mouseout, я нашел несколько вещей, которые могут его отключить, вызывая а) игнорирование mouseout, как вы описываете, и b) рекурсивное инициирование события mouseover, так что если вы установите консоль. войдите в систему, консоль IE Developer Tools ломается и становится серой... что иногда, кажется, также останавливает распознавание указателей мыши.
Вот вещи, с которыми я столкнулся, которые вызывают это:
- Сброс преобразования, который заставил бы элемент перемещаться из-под мыши, а затем повторно применил его, поместив элемент обратно под курсор. не-IE ведет себя так, как будто ничего не произошло, и работает нормально, IE волнуется, как описано выше.
- .toFront () и.toBack() - не-IE распознает перемещенный элемент как тот же элемент в той же позиции X Y, IE волнуется, как описано выше.
В этом jsfiddle есть некоторые наблюдения и демонстрации (прочитайте и раскомментируйте различные комментарии).
Хороший обходной путь здесь - иметь какой-нибудь флаг, например, например, path.data(hoverIn, true);on mouse in and 'path.data( 'hoverIn', false ); на мышь, а затем обернуть .toFront() или оскорбительные превращения в проверке, что !path.data( 'hoverIn' ) так что это может произойти только один раз, пока не произойдет отключение мыши. Или сохраните ссылку на последний обнаруженный путь где-то после toFront() или что-то еще, то не toFront() или что-то еще, если этот путь тоже самый последний.
У меня была та же проблема (карта с регионами, которые меняли фон при наведении курсора), и в IE9/Opera для меня был заключен метод toFront(). Я удалил это, и он отлично работает.
Я обошел это ограничение, поместив код в анонимную функцию, а затем вызвав его через setTimeout внутренний обработчик событий.
Если вы добавляете прямоугольник в качестве фона под (и содержащий) объект, над которым пытаетесь навести курсор мыши, вы можете эффективно получить эффект наведения мыши, добавив еще один обработчик события наведения мыши на фоновый прямоугольник.