MouseEvent: свойство relatedTarget

Базовая реализация Широко поддерживается

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

Это MouseEvent.relatedTarget только для чтения, представляющее вторичную цель события мыши, если она есть.

То есть:

Имя события	`target`	`relatedTarget`
`mouseenter`	Элемент `EventTarget`, в который вошел указатель	Элемент `EventTarget`, из которого вышел указатель
`mouseleave`	Элемент `EventTarget`, из которого вышел указатель	Элемент `EventTarget`, в который вошел указатель
`mouseout`	Элемент `EventTarget`, из которого вышел указатель	Элемент `EventTarget`, в который вошел указатель
`mouseover`	Элемент `EventTarget`, в который вошел указатель	Элемент `EventTarget`, из которого вышел указатель
`dragenter`	Элемент `EventTarget`, в который вошел указатель	Элемент `EventTarget`, из которого вышел указатель
`dragleave`	Элемент `EventTarget`, из которого вышел указатель	Элемент `EventTarget`, в который вошел указатель

Для событий без вторичной цели relatedTarget возвращает null.

FocusEvent.relatedTarget — аналогичное свойство для событий фокуса.

Значение

Объект EventTarget или null.

Примеры

Попробуйте перемещать курсор мыши в красные и синие прямоугольники.

HTML

<body id="body">
  <div id="outer">
    <div id="red"></div>
    <div id="blue"></div>
  </div>
  <p id="log"></p>
</body>

CSS

#outer {
  width: 250px;
  height: 125px;
  display: flex;
}

#red {
  flex-grow: 1;
  background: red;
}

#blue {
  flex-grow: 1;
  background: blue;
}

#log {
  max-height: 120px;
  overflow-y: scroll;
}

JavaScript

const mouseoutLog = document.getElementById("log"),
  red = document.getElementById("red"),
  blue = document.getElementById("blue");

red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);

function outListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\nfrom ${event.target.id} into ${related} ${mouseoutLog.innerText}`;
}

function overListener(event) {
  let related = event.relatedTarget ? event.relatedTarget.id : "unknown";

  mouseoutLog.innerText = `\ninto ${event.target.id} from ${related} ${mouseoutLog.innerText}`;
}

Результат

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

Спецификация
UI Events # dom-mouseevent-relatedtarget

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`relatedTarget`	1	12	1.5	≤12.1	1	18	4	≤12.1	1	1.0	≤37
`drag_events`	60	79	59	47	Нет	60	59	44	Нет	8.0	60

См. также

MouseEvent

© 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/MouseEvent/relatedTarget