В чем разница между 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

Я столкнулся с аналогичной проблемой с использованием плана Javascript вместо jquery, но они как-то связаны, и я оставлю свои два цента на случай, если кто-то еще будет искать в настоящее время.

Я пытался использовать событие mouseout в меню навигации. У родительского div было подменю, состоящее из списка элементов uls. Когда я попытался перейти к div дочерним элементам, было запущено событие mouseout. Это не было моим желаемым результатом.

Из документации

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

И в этом была проблема.

Событие mouseleave не имело этой проблемы. Просто его использование заставило меня работать.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event