Описание: Привязывает обработчик события для выполнения, когда мышка покидает элемент, или вызывает этот обработчик на элемент.
.mouseleave( handler(объектСобытия) )
Добавлена в версию: 1.0
handler(объектСобытия)
Функция выполняется каждый раз, когда вызывается событие.
.mouseleave( )
Добавлена в версию: 1.0
.mouseleave( [ данныеСобытия ], обработчик(объектСобытия)
Добавлена в версию: 1.4.3
данныеСобытия
Карта данных, которая будет передана в обработчик событий.
обработчик(объектСобытия)
Функция для выполнения каждый раз, когда событие вызвано.
Этот метод является сокращением для .bind('mouseleave', handler) в первом варианте, и .trigger('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
Inner
Trigger the handler
Обработчик события может быть привязан к любому элементу:
$('#outer').mouseleave(function() {
$('#log').append('<div>Handler for .mouseleave() called.</div>');
});
Теперь, когда указатель мышки выходит из Outer <div>, сообщение прилагается к <div id="log">.
Мы можем также вызвать это событие, когда нажат другой элемент:
$('#other').click(function() {
$('#outer').mouseleave();
});
После выполнения этого кода, нажатие на Trigger the handler также выдаст сообщение.
Событие mouseleave отличается от mouseout способом передачи обработчика события.
Если mouseout был использован в данном примере,
а затем, когда курсор мыши вышел из элемента Inner,
обработчик будет запущен.
Это, как правило нежелательное поведение.
Событие mouseleave, с другой стороны, только запускает свой обработчик, когда мышка покидает связанный элемент, не потомок.
Таким образом, в этом примере обработчик запускается, когда мышка покидает элемент Outer, но не элемент
Inner.
Примеры
Отображает текст по событиям mouseover и mouseleave.
Mouseout активируется, когда указатель мыши входит или выходит в/из дочерний(го) элемент(а), в то время как
mouseleave этого не делает.
var i = 0;
$("div.overout").mouseout(function(){
$("p:first",this).text("mouse out");
$("p:last",this).text(++i);
}).mouseover(function(){
$("p:first",this).text("mouse over");
});
var n = 0;
$("div.enterleave").mouseenter(function(){
$("p:first",this).text("mouse enter");
}).mouseleave(function(){
$("p:first",this).text("mouse leave");
$("p:last",this).text(++n);
});
Пример - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var i = 0; $("div.overout").mouseout(function(){ $("p:first",this).text("mouse out"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("mouse over"); }); var n = 0; $("div.enterleave").mouseenter(function(){ $("p:first",this).text("mouse enter"); }).mouseleave(function(){ $("p:first",this).text("mouse leave"); $("p:last",this).text(++n); }); }); </script> <style> div.out { width:40%; height:120px; margin:0 15px; background-color:#D6EDFC; float:left; } div.in { width:60%; height:60%; background-color:#FFCC00; margin:10px auto; } p { line-height:1em; margin:0; padding:0; } </style> </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> </body> </html>
Была ли эта информация полезной?
