Как на jquery поймать момент когда мышку увели с элемента (mouseleave, mouseout)

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

Событие "mouseleave"

jQuery предоставляет нам событие "mouseleave", которое срабатывает в тот момент, когда мышь удаляется с элемента. Это отличается от события "mouseout", которое срабатывает, когда курсор мыши покидает любой подэлемент элемента.

Для примера создадим блок-элемент, на который мы будем реагировать. Поместим его внутри контейнера div и добавим несколько стилей:

<div class="container">
<div class="box">Наведите курсор мыши на меня!</div>
</div>

.container {
padding: 20px;
border: 1px solid black;
text-align: center;
}

.box {
display: inline-block;
padding: 20px;
background-color: lightgrey;
border-radius: 5px;
cursor: pointer;
}

Теперь мы можем использовать событие "mouseleave" для обнаружения момента, когда мышь покидает этот элемент:

$(document).ready(function() {
$('.box').on('mouseleave', function() {
alert('Вы убрали курсор мыши с элемента!');
});
});

Здесь мы привязали обработчик событий "mouseleave" к элементу с классом .box, чтобы вывести сообщение при ее срабатывании. Такой код должен быть помещен внутри $(document).ready(), чтобы гарантировать, что он будет исполнен только после загрузки страницы.

Мы также могли бы использовать метод .mouseleave() вместо .on('mouseleave', ...):

Это то же самое действие, но более сокращенный способ написания.

Событие "mouseout"

Как я уже упоминал, есть несколько событий мыши в jQuery, и событие "mouseout" похоже на "mouseleave", но с некоторыми отличиями. Вот как можно использовать его для определения момента, когда мышь покидает элемент:

$(document).ready(function() {
$('.box').on('mouseout', function(e) {
if (e.relatedTarget == null) {
alert('Вы убрали курсор мыши с элемента!');
}
});
});

Здесь мы использовали обработчик событий "mouseout", а не "mouseleave", и проверяем, является ли свойство relatedTarget объектом null (то есть, является ли элемент, на который перешла мышь, пустым). Если это так, то мы выводим сообщение.

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

Заключение

В этой статье мы рассмотрели, как с помощью jQuery можно определить момент, когда мышь удаляется с элемента. Мы использовали событие "mouseleave" и "mouseout", чтобы обнаружить это событие и выполнить нужные действия.