Содержание:
.on( "mouseleave" [, eventData ], handler )Возвращает: jQuery
Описание: Привязывает обработчик событий, который будет срабатывать, когда мышь покидает элемент.
-
версия добавлена: 1.7.on( "mouseleave" [, eventData ], handler )
Эта страница описывает событие mouseleave. Для устаревшего метода .mouseleave(), см. .mouseleave().
Событие mouseleave JavaScript является собственностью Internet Explorer. Из-за общей полезности этого события jQuery моделирует это событие, чтобы его можно было использовать независимо от браузера. Это событие отправляется элементу, когда указатель мыши покидает элемент. Любой элемент HTML может получить это событие.
Например, рассмотрим HTML:
<div id="outer">
Outer
<div id="inner">
Inner
</div>
</div>
<div id="other">
Trigger the handler
</div>
<div id="log"></div> 
Обработчик событий может быть привязан к любому элементу:
$( "#outer" ).on( "mouseleave", function() {
$( "#log" ).append( "<div>Handler for `mouseleave` called.</div>" );
} ); Теперь, когда указатель мыши выходит за пределы элемента Outer <div>, сообщение добавляется в <div id="log">. Вы также можете запустить событие, когда нажимается другой элемент:
$( "#other" ).on( "click", function() {
$( "#outer" ).trigger( "mouseleave" );
} ); После выполнения этого кода нажатия на Trigger the handler также будут добавлять сообщение.
Событие mouseleave отличается от mouseout способом обработки всплытия событий. Если бы mouseout использовалось в этом примере, то когда указатель мыши выходил из элемента Inner, обработчик срабатывал бы. Обычно это нежелательное поведение. Событие mouseleave событие, с другой стороны, срабатывает только тогда, когда мышь покидает элемент, к которому оно привязано, а не потомка. Таким образом, в этом примере обработчик срабатывает, когда мышь покидает элемент Outer, но не Inner элемент.
Пример:
Показать количество срабатываний событий mouseout и mouseleave. mouseout срабатывает, когда указатель выходит из дочернего элемента, а mouseleave срабатывает только тогда, когда указатель выходит из связанного элемента.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>on demo</title>
<style>
div.out {
width: 40%;
height: 120px;
margin: 0 15px;
background-color: #d6edfc;
float: left;
}
div.in {
width: 60%;
height: 60%;
background-color: #fc0;
margin: 10px auto;
}
p {
line-height: 1em;
margin: 0;
padding: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
<div class="out overout">
<p>move your mouse</p>
<div class="in overout"><p>move your mouse</p><p>0</p></div>
<p>0</p>
</div>
<div class="out enterleave">
<p>move your mouse</p>
<div class="in enterleave"><p>move your mouse</p><p>0</p></div>
<p>0</p>
</div>
<script>
var i = 0;
$( "div.overout" )
.on( "mouseover", function() {
$( "p", this ).first().text( "mouse over" );
} )
.on( "mouseout", function() {
$( "p", this ).first().text( "mouse out" );
$( "p", this ).last().text( ++i );
} );
var n = 0;
$( "div.enterleave" )
.on( "mouseenter", function() {
$( "p", this ).first().text( "mouse enter" );
} )
.on( "mouseleave", function() {
$( "p", this ).first().text( "mouse leave" );
$( "p", this ).last().text( ++n );
} );
</script>
</body>
</html> Демо:
.trigger( "mouseleave" )Возвращает: jQuery
Описание: Запустить событие "mouseleave" на элементе.
-
версия добавлена: 1.0.trigger( "mouseleave" )
- "mouseleave"Тип: строкаСтрока
"mouseleave".
-
См. описание для .on( "mouseleave", ... ).
