AlexPTS
@AlexPTS
Full stack веб разработчик

Почему событие mouseenter срабатывает 2 раза?

Песочница с проблемой - jsfiddle.net/alexpts/4res6aey/9

1. Почему не в chrome событие срабатывает 2 раза, ведь мы слушаем родителя и геометрия родителя не меняется. (Склонен считать, что верно в хром 1 раз срабатывает, а в других браузерах неверно).
2. Почему в chome нативное событие возникает 1 раз, а jquery событие 2 раза? (jquery ведь просто обертка, но откуда еще 1 событие появляется)
3. Как с этим бороться?

Решение:
Все дело действительно в эмуляции события mouseenter большинством браузеров и jQuery. Это видно из jsfiddle.net/4res6aey/16.
Реализация jQuery не учитывает нормальные браузеры (респект хрому) и не использует нативное событие mousenter, а так же эмулирует видимо. Отсюда и разница в поведении между нативным и jquery событием.

Написал в багтрекер FF, может быть они с chrome возьмут хороший пример - https://bugzilla.mozilla.org/show_bug.cgi?id=1130823
  • Вопрос задан
  • 3556 просмотров
Решения вопроса 1
@maxceem
1. Событие срабатывает два раза потому что когда мы наводим на блок то курсор наводится на фото, внутренний блок .item-а, и тригерит событие. После чего картинка сразу же удаляется, и получается что курсор уже становится наведенным на сам блок, и браузер видать считает это за новое наведение. Ведь по сути target - элемент на который наведен курсор - изменился. (Подтверждения что оно работает именно так у меня нет, но судя из экпериментов - так).

2. Это событие нативно в Хроме довольно недавно, оно пришло из ИЕ и jquery его симулирует для совместимости api.jquery.com/mouseenter/:
The mouseenter JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser.
Допустим близкое и более простое событие onmouseover работает одинаково что-то через jquery, что нативно, и выдает тоже 2 события, скорее всего по схеме, которую я описал в первом пункте.

3. Решений может быть много, в зависимости от того, какая реальная задача. В конкретно текущем примере, лучше вообще не использовать jquery, а сделать через css и псевдоклас :hover. Если это всего лишь упрощенный пример более сложной задачи, для которой css не подходит, то нужно смотреть тогда полную ситуацию, скорее всего нужно будет хитрить. Можно вешать событие на то, что должно исчезать, правда его лучше не удалять, а отсоединять .detach() или просто прятать .hide().
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
gluck59
@gluck59
Виртуальный глюк
Скорее всего у вас подключены две разных библиотеки jQuery.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы