Відповіді:
Подія mouseleave відрізняється від миші, тим, що вона обробляє бульбашку подій. Якщо в цьому прикладі використовувались миші, тоді, коли вказівник миші перемістився з елемента Внутрішній, обробник буде спрацьовувати. Зазвичай це небажана поведінка. З іншого боку, подія мишоловки спрацьовує його обробкою лише тоді, коли миша залишає елемент, до якого він пов'язаний, а не нащадка. Отже, у цьому прикладі обробник спрацьовує, коли миша залишає Зовнішній елемент, але не Внутрішній елемент.
Джерело: http://api.jquery.com/mouseleave/
Можуть бути випадки, коли mouseoutкращий вибір ніж mouseleave.
Наприклад, скажімо, ви створили підказку, яку потрібно відображати поруч із елементом на mouseenter. Ви використовуєте setTimeoutдля запобігання миттєвого спливу підказки. Ви очистите час очікування на mouseleaveвикористання, clearTimeoutякщо миша покине підказку, не відображатиметься. Це буде працювати 99% часу.
Але тепер скажімо, що елемент, до якого додано підказку, - це кнопка з clickподією, і припустимо також, що ця кнопка підказує користувачеві confirmабо alertполе або поле. Користувач натискає кнопку та alertспрацьовує. Користувач натискав його досить швидко, щоб у підказці не було шансів вискочити (поки що добре).
Користувач натискає alertкнопку «ОК», а миша залишає елемент. Але оскільки сторінка веб-переглядача перебуває у заблокованому стані, жоден javascript не запускатиметься доти, доки не буде натиснута кнопка ОК, що означає, що ваша mouseleaveподія НЕ ЗАПАЛИТИ . Після того, як користувач натисне OK, підсказка з’явиться (що не те, що ви хотіли).
Використання mouseoutв цьому випадку було б відповідним рішенням, оскільки воно вистрілить.
mouseoutв такому випадку вистрілять? Хіба б браузер ще не знаходився в заблокованому стані mouseout?
Документ API jQuery:
mouseout
Цей тип події може викликати багато головних болів через бурхливість подій. Наприклад, коли в цьому прикладі вказівник миші переміститься з елемента Внутрішній, на нього буде надіслана подія миші, а потім прокручуємо до Зовнішньої. Це може спровокувати зв'язаний обробник миші, якщо це невідповідно. Дивіться дискусію для .mouseleave () для корисної альтернативи.
Так mouseleaveце власна подія, яка була розроблена через вищезазначену причину.
Подія Mouseout запуститься, коли миша покине вибраний елемент, а також, коли миша покине свої дочірні елементи.
Елемент Mouseleave події запуститься, коли покажчик залишить лише вибраний елемент.
Довідка: W3School