mouseleave
==========

Событие `mouseleave` срабатывает, когда курсор манипулятора (обычно мыши) перемещается за границы элемента.

`mouseleave` и `mouseout (en-US)` схожи, но отличаются тем, что `mouseleave` не всплывает, а `mouseout` всплывает.
 Это значит, что `mouseleave` срабатывает, когда курсор выходит за границы элемента *и* всех его дочерних элементов, в то время как `mouseout` срабатывает, когда курсор покидает границы элемента *или* одного из его дочерних элементов (даже если курсор все ещё находится в пределах элемента).


| Диаграмма поведения mouseleave | Диаграмма поведения mouseout |
| --- | --- |
| Одно `mouseleave` событие шлётся каждому элементу в иерархии в момент выхода курсора за их границы. Здесь 4 события рассылаются четырём элементам в иерархии когда курсор передвигается от текста к области за границей самого внешнего div элемента представленного на картинке. | Одно единственное `mouseout` событие шлётся самому глубоколежащему элементу в DOM дереве, затем оно поднимается вверх по иерархии пока не будет отменено обработчиком или не достигнет корня. |

Общая информация
----------------

Спецификация

DOM L3

Интерфейс
`MouseEvent`
Bubbles

Нет

Отменяемое

Нет

Цель
`Element()` (en-US)
Действие по умолчанию

Нет

Свойства
--------

| Свойство | Тип | Описание |
| --- | --- | --- |
| `target` Только для чтения  | `EventTarget` | Целевой элемент события (вышележащий элемент в DOM дереве). |
| `type` Только для чтения  | `DOMString` | Тип события. |
| `bubbles` Только для чтения  | Boolean | Поднимается ли событие вверх как принято или нет |
| `cancelable` Только для чтения  | `Boolean` | Является ли событие отменяемым или нет? |
| `view` Только для чтения  | `WindowProxy` | `document.defaultView` (`window` объекта document) |
| `detail` Только для чтения  | `long` (`float`) | 0. |
| `currentTarget` Только для чтения  | `EventTarget` | Целевой узел (элемент), который используется обработчиком события. |
| `relatedTarget` Только для чтения  | `EventTarget` | Для `mouseover`, `mouseout`, `mouseenter` и `mouseleave` событий: цель дополнительного события (`mouseleave` цель в случае наступления `mouseenter` события). `null` иначе. |
| `screenX` Только для чтения  | long | X координата указателя мыши в глобальных (относительно экрана) координатах. |
| `screenY` Только для чтения  | long | Y координата указателя мыши в глобальных (относительно экрана) координатах. |
| `clientX` Только для чтения  | long | X координата указателя мыши в локальных (относительно DOM содержимого) координатах. |
| `clientY` Только для чтения  | long | Y координата указателя мыши в локальных (относительно DOM содержимого) координатах. |
| `button` Только для чтения  | unsigned short | Всегда 0, так как нажатие любой кнопки не может произвести это событие (mouse movement does). |
| `buttons` Только для чтения  | unsigned short | The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, returns 3 (=1 | 2). More info. |
| `mozPressure` Только для чтения  | float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
| `ctrlKey` Только для чтения  | boolean | `true` if the control key was down when the event was fired. `false` otherwise. |
| `shiftKey` Только для чтения  | boolean | `true` if the shift key was down when the event was fired. `false` otherwise. |
| `altKey` Только для чтения  | boolean | `true` if the alt key was down when the event was fired. `false` otherwise. |
| `metaKey` Только для чтения  | boolean | `true` if the meta key was down when the event was fired. `false` otherwise. |

Примеры
-------

The `mouseout` (en-US) documentation has an example illustrating the difference between `mouseout` and `mouseleave`.

The following example illustrates how to use `mouseout`, to simulate the principle of event delegation for the mouseleave event.


```html
<ul id="test">
  <li>
    <ul class="leave-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    </ul>
  </li>
  <li>
    <ul class="leave-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>
    </ul>
  </li>
</ul>

<script>
 var delegationSelector = ".leave-sensitive";

 document.getElementById("test").addEventListener(
 "mouseout",
 function (event) {
 var target = event.target,
 related = event.relatedTarget,
 match;

 // search for a parent node matching the delegation selector
 while (
 target &&
 target != document &&
 !(match = matches(target, delegationSelector))
 ) {
 target = target.parentNode;
 }

 // exit if no matching node has been found
 if (!match) {
 return;
 }

 // loop through the parent of the related target to make sure that it's not a child of the target
 while (related && related != target && related != document) {
 related = related.parentNode;
 }

 // exit if this is the case
 if (related == target) {
 return;
 }

 // the "delegated mouseleave" handler can now be executed
 // change the color of the text
 target.style.color = "orange";
 // reset the color after a small amount of time
 setTimeout(function () {
 target.style.color = "";
 }, 500);
 },
 false,
 );

 // function used to check if a DOM element matches a given selector
 // the following code can be replaced by this IE8 compatible function: https://gist.github.com/2851541
 function matches(elem, selector) {
 // the matchesSelector is prefixed in most (if not all) browsers
 return elem.matchesSelector(selector);
 }
</script>
```

Спецификации
------------

| Specification |
| --- |
| UI Events # event-type-mouseleave |
| HTML Standard # handler-onmouseleave |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `mousedown (en-US)`
* `mouseup (en-US)`
* `mousemove (en-US)`
* `click (en-US)`
* `dblclick (en-US)`
* `mouseover (en-US)`
* `mouseout (en-US)`
* `mouseenter (en-US)`
* `mouseleave (en-US)`
* `contextmenu (en-US)`