jQuery метод .mouseleave()

Определение и применение

jQuery метод .mouseleave() привязывает JavaScript обработчик событий mouseleave (срабатывает, когда указатель мыши выходит из элемента), или запускает это событие на выбранный элемент.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).mouseleave() // метод используется без параметров

$( selector ).mouseleave( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).mouseleave( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

Обращаю Ваше внимание, что метод .mouseleave(), используемый вместе с функцией, переданной в качестве параметра (handler) является, короткой записью метода .on(), а без параметра является короткой записью метода .trigger():

$( selector ).on( "mouseleave", handler )

$( selector ).trigger( "mouseleave" )

Добавлен в версии jQuery

Значения параметров

Пример старого кода

Пример использования jQuery метода .mouseleave() (без параметров и с функцией)

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<button>Клик</button>
<div></div>

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').mouseleave()
    })
    $('div').mouseenter(function () {
        $('div').css('background', 'green')
    })
    var num = 0
    $('div').mouseleave(function () {
        num++
        $('div').css('background', 'red')
        $('div').text('leave ' + num)
    })
})

style.css

CSS

div {
    width: 100px;
    height: 100px;
    margin-top: 30px;
    background: yellow;
}

В этом примере с использованием jQuery метода .mouseleave() мы при нажатии на элемент <button> (кнопка) вызываем событие "mouseleave" на элементе <div>. Самому элементу <div> задаем, что при срабатывании события "mouseenter" на элементе выполнить функцию, которая с использованием метода .css() изменяет цвет заднего фона элемента и с помощью метода .text() выводим текстовое содержимое и значение переменной, которая выступает в роли счетчика. То есть мы вызываем событие .mouseleave() либо при нажатии на кнопку, либо при вхождении указателя мыши на элемент.

Кроме того, мы задаем функцию при вхождении указателя мыши из элемента <div> (событие .mouseenter()), которая по аналогии с предыдущим событием изменяет цвет заднего фона элемента.

Рассмотрим следующий пример в котором сравним разницу в срабатывании событий "mouseleave" и "mouseout":

Отличие событий mouseleave от mouseout

Нажмите ▶, затем выполните действие из пояснения. Измените JavaScript и запустите пример ещё раз. В редакторе используется jQuery 4.0.0.

index.html

HTML

<div class="leave">
  <span>mouseleave - </span>
  <div></div>
</div>

<div class="out">
  <span>mouseout - </span>
  <div></div>
</div>

main.js

JavaScript

$(document).ready(function () {
    var leave = 0
    $('.leave').mouseleave(function () {
        leave++
        $('.leave span').text('mouseleave - ' + leave)
    })
    var out = 0
    $('.out').mouseout(function () {
        out++
        $('.out span').text('mouseout - ' + out)
    })
})

style.css

CSS

div {
    width: 200px;
    height: 200px;
    margin: 25px 45px;
    background: yellow;
    display: inline-block;
    text-align: center;
}
div > div {
    width: 100px;
    height: 100px;
    background: green;
}

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