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

Базовая Широко доступная

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

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

Синтаксис

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

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

onmouseover = (event) => {};

Тип события

Тип MouseEvent. Наследуется от UIEvent и Event.

Свойства события

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

MouseEvent.altKey Только для чтения: Возвращает true , если клавиша Alt была нажата во время срабатывания события мыши.
MouseEvent.button Только для чтения: Номер нажатой кнопки (если применимо) во время срабатывания события мыши.
MouseEvent.buttons Только для чтения: Кнопки, нажатые (если таковые имеются) во время срабатывания события мыши.
MouseEvent.clientX Только для чтения: Координата X указателя мыши в координатах области просмотра.
MouseEvent.clientY Только для чтения: Координата Y указателя мыши в координатах области просмотра.
MouseEvent.ctrlKey Только для чтения: Возвращает true , если клавиша Ctrl была нажата во время срабатывания события мыши.
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.

Примеры

Следующий пример иллюстрирует разницу между событиями mouseover и mouseenter.

HTML

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

JavaScript

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

// This handler will be executed only once when the cursor
// moves over the unordered list
test.addEventListener(
  "mouseenter",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

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

// This handler will be executed every time the cursor
// is moved over a different list item
test.addEventListener(
  "mouseover",
  (event) => {
    // highlight the mouseover target
    event.target.style.color = "orange";

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

Результат

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

Спецификация
UI Events # event-type-mouseover
HTML # handler-onmouseover

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`mouseover_event`	2	12	6	9.5	4	18	6	10.1	3.2	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event