Рафаэль и ИЭ. Обходной путь

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

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


person Alec Sanger    schedule 29.09.2011    source источник
comment
Вы когда-нибудь узнавали, что здесь делать? Кажется, я не могу обойти проблему onmouseout.   -  person Silkster    schedule 24.01.2012
comment
К сожалению, я этого не сделал. Мне нужно было выполнить сброс для всех других объектов, чтобы вернуть их в нормальное состояние, когда другой объект вызывал наведение курсора мыши. Мой проект представлял собой помеченную карту США с определенными городами, показываемыми при наведении курсора. Каждый из этих городов был дочерним по отношению к состоянию и должен был наследовать свойства наведения мыши, чтобы не отменить предыдущее событие наведения мыши. Это был просто беспорядок. Хотя в других браузерах работает фантастически... Удачи. Если вы что-то выясните, пожалуйста, обновите этот пост.   -  person Alec Sanger    schedule 24.01.2012
comment
У меня тоже была карта США. Для IE я закончил тем, что добавил глобальную переменную отслеживания, current, которая используется для сброса предыдущего состояния, на которое наведен курсор. При наведении курсора на следующее состояние метод onmouseover сначала сбрасывает предыдущее состояние, а затем обновляет переменную текущим состоянием. Это также позволило мне сбросить состояние, на которое ранее наводилось курсор, выбрав состояние из списка загрузки, который обеспечивает ту же функциональность, но без карты.   -  person Silkster    schedule 13.02.2012
comment
Хорошее решение существует по адресу stackoverflow.com/questions/3908812/   -  person Brad Werth    schedule 16.02.2012


Ответы (4)


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

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

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

  • Сброс преобразования, из-за которого элемент уходил из-под мыши, а затем повторное его применение возвращало элемент под курсор. не-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() или что-то еще, если этот путь также является самым последним зависшим.

person user56reinstatemonica8    schedule 01.03.2012
comment
Быстрый кредит - jsfiddle адаптирован из ответа на этот связанный вопрос stackoverflow.com/questions/3908812/ - person user56reinstatemonica8; 01.03.2012
comment
Спасибо за этот ответ, ваш JSFiddle помог. - person Jasper; 22.08.2012
comment
+1. .toFront() сбивал меня с толку в IE8. Удаление решило проблему. - person HaL; 19.01.2013

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

person Gappa    schedule 24.10.2012

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

person ntatic    schedule 04.12.2012

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

person David Beckwith    schedule 07.06.2012