Обработчик или источник выхода курсора из элемента

.mouseleave()

Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Метод имеет три варианта использования:

.mouseleave(handler(eventObject)):jQuery1.0

Устанавливает функцию handler в качестве обработчика события mouseleave, на выбранные элементы.
Метод является аналогом bind("mouseleave", handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

.mouseleave(eventData, handler(eventObject)):jQuery1.4.3

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("mouseleave", eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...}.

.mouseleave():jQuery1.0

Вызывает событие mouseenter, у выбранных элементов страницы. Метод является аналогом trigger("mouseleave").

Убрать установленный обработчик можно с помощью метода unbind().

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

Метод хорошо совместим с mouseenter(), и плохо с mouseover().

Простой пример:

// установим обработчик события mouseleave, элементу с идентификатором foo
$('#foo').mouseleave(function(){
  alert('Курсор мыши вышел из границ элемента "foo"');
});
 
// вызовем событие mouseleave на элементе foo
$('#foo').mouseleave();
 
// установим еще один обработчик события mouseleave, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mouseleave({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Курсор вышел из границ элемента с классом block. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

Особенности метода

По своему назначению, mouseleave совпадает с событием mouseout. Однако у них имеются заметные отличия. Дело в том, что mouseout, как и многие другие стандартные события javascript, обладает свойством "всплытия" вверх по иерархии. То есть, после выполнения на элементе, событие передается родительскому элементу, потом прародительскому, и так далее, вплоть до начала дерева DOM. Эта особенность может приводить к различным проблемам. Событие mouseleave таким свойством не обладает, и выполняется только один раз, на самом элементе. Поэтому, в некоторых случаях, оно может быть гораздо удобнее. Покажем различия в поведении этих событий на примере:

<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-latest.min.js"></script>
  <style>
    div{padding:10px; margin:5px; border:1px solid red}
  </style>
</head>
<body>
 
<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="log"></div>
 
<script>
  // какой-то javascript
</script>
</body>
</html>

Страница будет выглядеть следующим образом:
Image:Pict34.png


Теперь, установим на элементы Outer и Inner по одному обработчику событий mouseleave и mouseout:

// при возникновении события mouseleave, добавим новую запись в элемент с идентификатором log
$('#outer').mouseleave(function(){
  $('#log').append('<div style="color:blue">Был вызван обработчик события mouseleave на элементе outer</div>');
});
$('#inner').mouseleave(function(){
  $('#log').append('<div style="color:blue">Был вызван обработчик события mouseleave на элементе inner</div>');
});
 
// при возникновении события mouseout, добавим новую запись в элемент с идентификатором log
$('#outer').mouseout(function(){
  $('#log').append('<div style="color:green">Был вызван обработчик события mouseout на элементе outer</div>');
});
$('#inner').mouseout(function(){
  $('#log').append('<div style="color:green">Был вызван обработчик события mouseout на элементе inner</div>');
});


Теперь, если мы проведем курсором снизу вверх по странице, события будут происходить следующим образом:
Image:Pict36.png

В действии

Следующий пример позволяет вам увидеть различия mouseleave и mouseout "в живую":

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~script src="//code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    div{padding:10px; margin:5px;}
    #outer{background-color:#D6EDFC}
    #inner{background-color:#FFCC00}
    #out-mouseout, #in-mouseout{float:right}
    #out-leave, #in-leave{float:left}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
 
~lt~div id="outer"~gt~
  ~lt~p id="out-leave"~gt~mouseleave - 0~lt~/p~gt~~lt~p id="out-mouseout"~gt~mouseout - 0~lt~/p~gt~
  ~lt~div style="clear:both" /~gt~
  ~lt~div id="inner"~gt~
    ~lt~p id="in-leave"~gt~mouseleave -0~lt~/p~gt~~lt~p id="in-mouseout"~gt~mouseout - 0~lt~/p~gt~
    ~lt~div style="clear:both" /~gt~
  ~lt~/div~gt~
~lt~/div~gt~
 
~lt~script~gt~
  var out_i = 0;
  var in_i = 0;
  $('#outer').mouseleave(function(){
    out_i++;
    $("#out-leave").text("mouseleave - " + out_i);
  });
  $('#inner').mouseleave(function(){
    in_i++;
    $("#in-leave").text("mouseleave - " + in_i);
  });
 
  var out_j = 0;
  var in_j = 0;
  $('#outer').mouseout(function(){
    out_j++;
    $("#out-mouseout").text("mouseout- " + out_j);
  });
  $('#inner').mouseout(function(){
    in_j++;
    $("#in-mouseout").text("mouseout- " + in_j);
  });
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Ссылки

Поисковые ключи:
  • обработка события mouseleave
  • обработчик события mouseleave
  • выход курсора за пределы элемента
  • обработка выхода курсора за пределы элемента
  • курсор вышел за пределы элемента
  • .mouseleave()
  • mouseleave()