relatedTarget: отличить переход внутри блока от выхода

Назначение

RelatedTarget у мышиного события помогает понять, куда перешёл указатель или откуда он пришёл. Это полезно, когда обработчик стоит на контейнере с несколькими вложенными элементами.

Как это работает

Создайте div id hover-panel с заголовком и абзацем. Mouseout всплывает и может происходить при движении между потомками. Пример игнорирует переходы на узлы, которые остаются внутри панели.

Пример

const panel = document.querySelector("#hover-panel");
panel.addEventListener("mouseout", event => {
  const next = event.relatedTarget;
  if (next instanceof Node && panel.contains(next)) return;
  console.log("Выход из панели:", next);
});

Что должно получиться

Перемещение между заголовком и абзацем не считается выходом из всей панели. При уходе за её пределы появляется сообщение. RelatedTarget может быть null, и такой случай обработан без обращения к отсутствующему узлу.

Граница применения и частая ошибка

Mouseout отличается от mouseleave, который не всплывает обычным образом. Shadow DOM и переходы между документами требуют отдельной проверки. Мышиное состояние не заменяет состояние клавиатурного фокуса: подсказка должна оставаться доступной и без наведения.

Самостоятельная проверка

Проведите указатель между вложенными элементами и наружу, сравнив target и relatedTarget. Затем замените событие на mouseleave и оцените, нужен ли ваш фильтр для выбранной структуры.

Связанные материалы

• События
• Отложенная обработка ввода
• Клавиатура