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

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

mouseout также доставляется элементу, если курсор входит в дочерний элемент, потому что дочерний элемент скрывает видимую область элемента.

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

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

onmouseout = (event) => {};

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

Следующий пример иллюстрирует разницу между событиями mouseout и mouseleave. Событие mouseleave добавлено к <ul> для изменения цвета списка на фиолетовый, когда курсор выходит за пределы <ul>. Событие mouseout добавлено к списку, чтобы окрасить целевой элемент в оранжевый цвет, когда курсор выходит за его пределы.

При тестировании вы увидите, что событие mouseout срабатывает для отдельных элементов списка, в то время как событие mouseleave срабатывает для всего списка благодаря иерархии элементов и тому, что элементы списка закрывают лежащие под ними <ul>.

HTML

<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript

const test = document.getElementById("test");

// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
  "mouseleave",
  (event) => {
    // highlight the mouseleave target
    event.target.style.color = "purple";

    // reset the color after a short delay
    setTimeout(() => {
      event.target.style.color = "";
    }, 1000);
  },
  false,
);

// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
  "mouseout",
  (event) => {
    // highlight the mouseout target
    event.target.style.color = "orange";

    // reset the color after a short delay
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

Результат

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