Элемент: событие mouseleave

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

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

События mouseleave и mouseout не будут сгенерированы, если элемент будет заменён или удалён из DOM.

Обратите внимание, что «выход за пределы элемента» относится к положению элемента в дереве DOM, а не к его визуальному положению. Например, если два соседних элемента расположены так, что один находится внутри другого, то перемещение из внешнего элемента во внутренний элемент вызовет событие mouseleave на внешнем элементе, даже если указатель все еще находится в пределах границ внешнего элемента.

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("mouseleave", (event) => {});

onmouseleave = (event) => {};

Объект MouseEvent. Наследуется от UIEvent и Event.

Этот интерфейс также наследует свойства своих родительских элементов, UIEvent и Event.

MouseEvent.altKey Только для чтения

Возвращает true, если клавиша alt была нажата во время генерации события мыши.

MouseEvent.button Только для чтения

Номер нажатой кнопки (если применимо) во время генерации события мыши.

MouseEvent.buttons Только для чтения

Нажатые кнопки (если есть) во время генерации события мыши.

MouseEvent.clientX Только для чтения

Координата X указателя мыши в координатах viewport.

MouseEvent.clientY Только для чтения

Координата Y указателя мыши в координатах viewport.

MouseEvent.ctrlKey Только для чтения

Возвращает true, если клавиша control была нажата во время генерации события мыши.

MouseEvent.layerX Нестандартно Только для чтения

Возвращает горизонтальную координату события относительно текущего слоя.

MouseEvent.layerY Нестандартно Только для чтения

Возвращает вертикальную координату события относительно текущего слоя.

MouseEvent.metaKey Только для чтения

Возвращает true, если клавиша meta была нажата во время генерации события мыши.

MouseEvent.movementX Только для чтения

Координата X указателя мыши относительно позиции последнего события mousemove.

MouseEvent.movementY Только для чтения

Координата Y указателя мыши относительно позиции последнего события mousemove.

MouseEvent.offsetX Только для чтения

Координата X указателя мыши относительно позиции поля ввода целевого узла.

MouseEvent.offsetY Только для чтения

Координата Y указателя мыши относительно позиции поля ввода целевого узла.

MouseEvent.pageX Только для чтения

Координата X указателя мыши относительно всего документа.

MouseEvent.pageY Только для чтения

Координата Y указателя мыши относительно всего документа.

MouseEvent.relatedTarget Только для чтения

Вторичная цель события, если она есть.

MouseEvent.screenX Только для чтения

Координата X указателя мыши в координатах экрана.

MouseEvent.screenY Только для чтения

Координата Y указателя мыши в координатах экрана.

MouseEvent.shiftKey Только для чтения

Возвращает true, если клавиша shift была нажата во время генерации события мыши.

MouseEvent.mozInputSource Нестандартно Только для чтения

Тип устройства, сгенерировавшего событие (одно из MOZ_SOURCE_* констант). Это позволяет, например, определить, было ли событие мыши сгенерировано фактической мышью или касанием (что может повлиять на точность интерпретации координат, связанных с событием).

MouseEvent.webkitForce Нестандартно Только для чтения

Величина нажатия при щелчке.

MouseEvent.x Только для чтения

Псевдоним для MouseEvent.clientX.

MouseEvent.y Только для чтения

Псевдоним для MouseEvent.clientY.

Одно событие mouseleave отправляется каждому элементу иерархии при выходе из него. Здесь четыре события отправляются четырём элементам иерархии, когда указатель перемещается из текста в область за пределами самого внешнего div, представленного здесь.

Одно событие mouseout отправляется самому глубокому элементу дерева DOM, а затем распространяется вверх по иерархии до тех пор, пока не будет отменено обработчиком или не достигнет корня.

В документации mouseout приведён пример, иллюстрирующий разницу между mouseout и mouseleave.

В следующем тривиальном примере используется событие mouseenter для изменения границы на <div> при наведении курсора на отведённое для него место. Затем добавляется элемент в список с номером события mouseenter или mouseleave.

HTML

<div id="mouseTarget">
  <ul id="unorderedList">
    <li>No events yet!</li>
  </ul>
</div>

CSS

Стиль <div> для повышения его видимости.

#mouseTarget {
  box-sizing: border-box;
  width: 15rem;
  border: 1px solid #333;
}

JavaScript

let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");

mouseTarget.addEventListener("mouseenter", (e) => {
  mouseTarget.style.border = "5px dotted orange";
  enterEventCount++;
  addListItem(`This is mouseenter event ${enterEventCount}.`);
});

mouseTarget.addEventListener("mouseleave", (e) => {
  mouseTarget.style.border = "1px solid #333";
  leaveEventCount++;
  addListItem(`This is mouseleave event ${leaveEventCount}.`);
});

function addListItem(text) {
  // Create a new text node using the supplied text
  const newTextNode = document.createTextNode(text);

  // Create a new li element
  const newListItem = document.createElement("li");

  // Add the text node to the li element
  newListItem.appendChild(newTextNode);

  // Add the newly created list item to list
  unorderedList.appendChild(newListItem);
}

Результат

• Урок: Введение в события
• mousedown
• mouseup
• mousemove
• click
• dblclick
• mouseover
• mouseout
• mouseenter
• contextmenu