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

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

Событие mouseleave отличается от mouseout тем, как оно обрабатывает восходящую цепочку событий. Если бы в этом примере использовался mouseout, то, когда указатель мыши переместился из внутреннего элемента, обработчик сработал бы. Обычно это нежелательное поведение. Событие mouseleave, с другой стороны, запускает свой обработчик только тогда, когда мышь покидает связанный с ним элемент, а не его потомок. Итак, в этом примере обработчик запускается, когда мышь покидает внешний элемент, но не внутренний элемент.

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

Бывают случаи, когда mouseoutлучше, чем mouseleave.

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

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

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

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

Документ jQuery API:

mouseout

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

Так mouseleaveже и индивидуальное мероприятие, которое было разработано по вышеуказанной причине.

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

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

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

Ссылка: W3School