В чем разница между jQuery mouseout () и mouseleave ()?

Question

В чем разница между mouseQave () и mouseleave () в jQuery?

Answer 1

Событие mouseleave отличается от mouseout тем, как оно обрабатывает всплытие событий.Если в этом примере использовались указатели мыши, то при перемещении указателя мыши из элемента «Внутренний» обработчик срабатывает.Это обычно нежелательное поведение.Событие mouseleave, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает элемент, с которым она связана, а не потомок.Таким образом, в этом примере обработчик срабатывает, когда мышь покидает внешний элемент, но не внутренний элемент.

Источник: http://api.jquery.com/mouseleave/

Answer 2

Могут быть случаи, когда mouseout является лучшим выбором, чем mouseleave.

Например, допустим, вы создали всплывающую подсказку, которая должна отображаться рядом с элементом в mouseenter. Вы используете setTimeout, чтобы всплывающая подсказка не появлялась мгновенно. Вы сбрасываете время ожидания на mouseleave, используя clearTimeout, поэтому, если мышь покидает подсказку, она не будет отображаться. Это будет работать в 99% случаев.

Но теперь давайте предположим, что элемент, к которому прикреплена всплывающая подсказка, - это кнопка с событием click, и давайте также предположим, что эта кнопка предлагает пользователю либо поле confirm, либо alert. Пользователь нажимает кнопку и запускается alert. Пользователь нажал ее достаточно быстро, чтобы всплывающая подсказка не имела возможности всплыть (пока все хорошо).

Пользователь нажимает кнопку OK alert, и мышь покидает элемент. Но так как страница браузера теперь находится в заблокированном состоянии, никакой javascript не будет срабатывать до тех пор, пока не будет нажата кнопка «ОК», что означает, что ваше mouseleave событие НЕ БУДЕТ ПОЖАРА . После того, как пользователь нажмет OK, всплывет всплывающая подсказка (а это не то, что вы хотели).

Использование mouseout в этом случае будет подходящим решением, потому что оно сработает.

Answer 3

jQuery API doc:

mouseout

Этот тип события может вызвать много головных болей из-за всплытия событий.Например, когда указатель мыши выходит из внутреннего элемента в этом примере, событие mouseout будет отправлено на него, а затем накапливается до Outer.Это может вызвать привязанный обработчик мыши в неподходящее время.См. Обсуждение .mouseleave () для полезной альтернативы.

Итак, mouseleave - это пользовательское событие, которое было разработано по вышеуказанной причине.

http://api.jquery.com/mouseleave/

Answer 4

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

Событие Mouseleave элемент будет запускаться, когда указатель покинет только выбранный элемент.

Ссылка: W3School