Почему события jQuery mouseenter запускаются в неопределенном порядке?

У меня есть 3 div, содержащих друг друга, как матрешка.

Для всех div у меня есть функция, связанная с событием mousenter. Теперь перемещение мыши медленно снизу и вход в третий слой приведет к следующим событиям:

  1. Mouseenter первый слой
  2. Mouseenter слой два
  3. Mouseenter третий слой

Это идеально и ожидаемый результат, так как вам нужно сначала войти на первый уровень, чтобы войти на второй уровень и т. д.

Однако, если я сделаю то же самое с быстрым движением мыши, порядок будет неопределенным, например:

  1. Mouseenter слой два
  2. Mouseenter первый слой
  3. Mouseenter третий слой

Что для меня не имеет особого смысла - как ваша мышь может войти во второй слой до входа в первый слой?

В любом случае, вопрос: есть ли способ заставить jQuery или javascript в целом запускать эти события в их естественном порядке? Если нет, можете ли вы предложить мне обходной путь, например, как-то опубликовать сортировку событий из моей функции обработчика событий и отложить те, которые были вызваны преждевременно?

Тестовый код размещен по адресу http://jsbin.com/ibepu6/4/.


javascript events jquery event-handling mouseenter
person András Szepesházi    schedule 16.04.2011    source источник
comment
любопытно - используя последние версии Firefox и Chrome на ПК со скромными характеристиками (по сегодняшним меркам), я не могу воспроизвести ваш результат, как бы быстро я ни двигал мышь.   -  person Alnitak    schedule 20.04.2011
comment
@Alnitak: я использую FF 3.6.16 на ноутбуке Core2Duo Vista. Я могу воспроизвести это поведение в любое время. Попробуйте добавить больше слоев и меньшие отступы к сложенным блокам div. Можешь потом воспроизвести?   -  person András Szepesházi    schedule 20.04.2011
comment
@Alnitak: jsbin.com/ibepu6/14 имеет меньшие отступы и 5 слоев. Протестируйте, пожалуйста.   -  person András Szepesházi    schedule 20.04.2011
comment
Я думаю, что это проблема с пузырем, не так ли?   -  person wizztjh    schedule 20.04.2011

Ответы (3)


arrow_upward
2
arrow_downward

Обычно события mouseenter и mouseleave основаны на событиях Microsoft, jquery позволяет использовать их во всех браузерах, используя другие функции для создания этого эффекта... Сначала посмотрите и протестируйте демонстрацию в страница событий jquery. Я не проверяю источник jquery, но, насколько я знаю, в javascript есть два разных механизма упорядочения событий... Захват событий и всплытие событий...

Этот документ не нов, но в нем описываются необходимые вам основы. Это старый документ о событиях мыши и о том, как они выполняются...

Так что проверьте исходный код jquery и посмотрите, как работают mouseenter и mouseleave. Как я уже говорил, это не основная функция, которая работает только в IE, а симуляция, которая действует так же, как события mouseenter и mouseleave, используя другие функции javascript... Вот как jquery делает эти два события Microsoft доступными для всех браузеров. .

person FallenAngel    schedule 20.04.2011
comment
Ссылка на quirksmode.org очень полезна, я многому научился на ней. Спасибо. - person András Szepesházi; 20.04.2011

arrow_upward
0
arrow_downward

Я отредактировал ваш код в Jsbin, чтобы опубликовать сортировку инициированных событий. Я не уверен, что это вообще полезно для вашего случая, но вот код отредактированный Jsbin

person omerkirk    schedule 20.04.2011
comment
omerkirk: Это круто, но вы полагаетесь на идентификаторы div для сортировки. У меня были эти конкретные идентификаторы только для демонстрационных целей, очень упрощенный пример реальной ситуации, с которой я столкнулся. Мне нужно: а) отсортировать события на основе иерархии dom, б) как-то сгруппировать события (события принадлежат друг другу, только если они происходят в дельта-таймфрейме) - person András Szepesházi; 20.04.2011
comment
Я догадался, что это бесполезно :) Проблема в том, что события mouseenter не существует. Это пользовательское событие, определенное jquery, поэтому оно выполняет довольно много операций в фоновом режиме, даже если у вас есть один div, если вы перемещаете мышь достаточно быстро, это событие даже не вызывается. - person omerkirk; 20.04.2011

arrow_upward
-1
arrow_downward

проблема в следующем:

вы ни в коем случае не можете перевести мышь прямо на третий слой, так как он находится внутри второго, который находится внутри первого. видны части второго и первого слоя.

Независимо от того, как быстро вы двигаете мышью, она все равно сработает первой или второй перед третьей. Для этого нет очевидного решения, видимые части второго и первого слоя, наведенные курсором мыши, всегда будут запускать второй и первый указатель мыши перед третьим. Если двигаться очень быстро, этот порядок можно изменить, но он не может быть последовательным.

person Mamoon ur Rasheed    schedule 16.04.2011
comment
Я думаю, вы могли неправильно понять мой вопрос. Моя проблема не в том, что все три события будут запущены. Это ожидаемое поведение и хорошая вещь. Моя проблема в том, что при достаточно быстрых движениях мыши порядок этих событий будет перепутан. Мне нужен постоянный порядок, как этого добиться? - person András Szepesházi; 16.04.2011