В чем разница между jQuery mouseout() и mouseleave()?
В чем разница между jQuery mouseout() и mouseleave()?
Ответ 1
Событие mouseleave отличается от mouseout тем, как он обрабатывает пузырьки событий. Если мышь использовалась в этом примере, тогда, когда указатель мыши перемещается из внутреннего элемента, обработчик будет запущен. Обычно это нежелательное поведение. С другой стороны, событие mouseleave запускает только его обработчик, когда мышь покидает элемент, к которому он привязан, а не потомок. Таким образом, в этом примере обработчик запускается, когда мышь покидает элемент Outer, но не элемент Inner.
Источник: http://api.jquery.com/mouseleave/
Удивительно, что есть много результатов @http://www.google.com/search?sourceid=chrome&ie=UTF-8&q=jquery+mouseleave+mouseout+difference
Ответ 2
Могут быть моменты, когда mouseout - лучший выбор, чем mouseleave.
Например, предположим, что вы создали всплывающую подсказку, которую вы хотите отобразить рядом с элементом на mouseenter. Вы используете setTimeout, чтобы предотвратить всплытие всплывающей подсказки. Вы очищаете таймаут на mouseleave с помощью clearTimeout, поэтому, если мышь не выйдет, всплывающая подсказка не будет отображаться. Это будет работать в 99% случаев.
Но теперь скажем, что у элемента, к которому вы прикрепляете всплывающую подсказку, есть кнопка с событием click, и пусть также предположим, что эта кнопка предлагает пользователю либо поле confirm, либо alert. Пользователь нажимает кнопку, а alert срабатывает. Пользователь нажал его достаточно быстро, чтобы ваша всплывающая подсказка не имела возможности всплывать (пока это так хорошо).
Пользователь нажимает кнопку ОК alert OK, и мышь покидает элемент. Но так как страница браузера теперь находится в заблокированном состоянии, javascript не загорится, пока не будет нажата кнопка ОК, что означает ваше событие mouseleave WILL NOT FIRE. После того, как пользователь нажмет OK, всплывает всплывающая подсказка (что вам не нужно).
Использование mouseout в этом случае было бы подходящим решением, потому что оно срабатывает.
Ответ 3
jQuery API doc:
mouseout
Этот тип события может вызвать много головных болей из-за пузырьков событий. Например, когда указатель мыши перемещается из элемента Inner в этом примере, событие mouseout будет отправлено на него, а затем просочится до Outer. Это может вызвать связанный обработчик mouseout в неподходящие моменты времени. См. Обсуждение для .mouseleave() для полезной альтернативы.
So mouseleave - это настраиваемое событие, которое было разработано по вышеуказанной причине.