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 працює аналогічно, вказуючи на елемент, на який або з якого перейшла миша.

правити

Порада

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

автор: Bond правити

Порада

Не завжди на події mouseout потрібно реагувати, якщо relatedTarget належить до того ж елемента, що і вихідний елемент. В таких випадках можна порівнювати relatedTarget із поточним елементом, щоб уникнути зайвих обробок.

автор: Bond правити

Порада

При використанні relatedTarget разом з іншими подіями миші варто перевіряти підтримку цієї властивості в старих браузерах, особливо якщо проект потребує підтримки застарілих версій, таких як Internet Explorer.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.relatedTarget

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

<div id="button1">Демонстраційний елемент</div>
<div id="button2">Демонстраційний елемент</div>

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

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

<select id="dropdown">
    <option value="1">перший</option>
    <option value="2">другий</option>
</select>

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

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