JS властивість Event.relatedTarget (Mouse)

Загальний опис

relatedTarget — це властивість об'єкта події MouseEvent, яка повертає елемент, пов'язаний із подіями миші, такими як mouseover, mouseout, mouseenter або mouseleave. Вона використовується для отримання інформації про елемент, на який курсор миші перемістився або з якого вийшов. Наприклад, у події mouseover властивість relatedTarget вказує на елемент, з якого мишу перемістили на поточний елемент, а в події mouseout — на елемент, на який мишу перемістили після виходу з поточного елемента.

Ця властивість особливо корисна при роботі з динамічними інтерфейсами, де потрібно знати, які елементи взаємодіють із курсором миші, наприклад, при створенні підказок або випадаючих меню. За допомогою relatedTarget можна уникнути зайвих подій або реалізувати більш точне відстеження переміщень миші між різними елементами.

Приклад використання:

element.addEventListener('mouseout', function(event) {
  console.log("Миша покинула елемент. Новий елемент: ", event.relatedTarget);
});

У цьому прикладі, коли миша виходить за межі елемента, relatedTarget містить посилання на елемент, на який миша перемістилася. Це дозволяє обробляти ситуації, коли потрібно реагувати на вихід курсора з елемента.

Робота з relatedTarget може включати перевірку того, чи дійсно курсор перейшов на інший елемент, а не просто вийшов за межі сторінки. Важливо пам'ятати, що для подій, таких як mouseenter або mouseleave, властивість relatedTarget працює аналогічно, вказуючи на елемент, на який або з якого перейшла миша.

Порада:	Не завжди на події `mouseout` потрібно реагувати, якщо `relatedTarget` належить до того ж елемента, що і вихідний елемент. В таких випадках можна порівнювати `relatedTarget` із поточним елементом, щоб уникнути зайвих обробок.
Порада:	При використанні `relatedTarget` разом з іншими подіями миші варто перевіряти підтримку цієї властивості в старих браузерах, особливо якщо проект потребує підтримки застарілих версій, таких як Internet Explorer.
Порада:	Для випадаючих меню або підказок варто використовувати `relatedTarget`, щоб переконатися, що миша дійсно залишила меню або підказку перед тим, як їх закрити. Це допоможе уникнути ситуацій, коли меню закривається занадто рано, якщо курсор просто рухається між різними частинами одного меню.

Синтаксис

event.relatedTarget

Значення

Return

Переглядачі

Переглядач
	1	1.5	1	12.1	12

Переглядач
	37	18	4	1

Переглядач
	-	-

Приклади

Коли користувач відводить курсор з кнопки, relatedTarget перевіряє, чи є цільовий елемент (той, на який наведено) нашою цільовою зоною (targetZone). Якщо це так, кнопка змінює колір на зелений, і виводиться повідомлення про це. В інших випадках кнопка стає червоною.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/ExqXeGR">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі, коли курсор миші залишає першу кнопку і переходить на другу, використовується relatedTarget для визначення цього переміщення. Це корисно для створення інтерактивних елементів, де важливо знати, чи миша перемістилася між певними елементами.

const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');

button1.addEventListener('mouseout', function(event) {
  if (event.relatedTarget === button2) {
    console.log("Миша перейшла з кнопки 1 на кнопку 2");
  }
});

Цей приклад показує, як закрити випадаюче меню, якщо курсор миші виходить за межі його елементів. Використовуючи relatedTarget, можна переконатися, що миша дійсно покинула меню, а не просто перемістилася між його частинами, що допомагає уникнути передчасного закриття меню.

const dropdown = document.getElementById('dropdown');
const closeMenu = () => {
  dropdown.style.display = 'none';
};

dropdown.addEventListener('mouseout', function(event) {
  if (!dropdown.contains(event.relatedTarget)) {
    closeMenu();
  }
});

JS довідник

JavaScript

Наповнення JS розділу