jQuery метод .mouseout()

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

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

jQuery синтаксис:

Синтаксис 1.0:

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

$( selector ).mouseout( handler )

handler - Function( Event eventObject )

Синтаксис 1.4.3:

$( selector ).mouseout( eventData, handler )

eventData - Anything

handler - Function( Event eventObject )

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

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

$( selector ).trigger( "mouseout" )

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

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

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

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

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

index.html

HTML

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

main.js

JavaScript

$(document).ready(function () {
    $('button').click(function () {
        $('div').mouseout()
    })
    var num = 0
    $('div').mouseout(function () {
        num++
        $('div').text('leave ' + num)
    })
})

style.css

CSS

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

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

Рассмотрим следующий пример в котором сравним разницу в срабатывании событий "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" срабатывает только когда указатель выходит из родительского элемента, независимо от того перемещается он по дочерним элементам, или нет.