JS властивість Event.mouseout

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

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

Ключовою особливістю mouseout є те, що подія має властивість "спливання" (bubbling), тобто вона може передаватися вгору по DOM-дереву до батьківських елементів. Ця подія передає об'єкт MouseEvent, який містить кілька корисних властивостей:

• target: елемент, з якого курсор миші вийшов.
• relatedTarget: елемент, на який перейшов курсор.
• clientX і clientY: координати курсора відносно вікна.

Для роботи з подією mouseout можна використати метод addEventListener:

const element = document.getElementById('myElement');
element.addEventListener('mouseout', function(event) {
  console.log('Курсор покинув елемент або його дочірній елемент.');
});

Ця подія часто використовується для скасування візуальних ефектів або приховання елементів, що відображаються при наведенні курсора на елемент. Наприклад, можна поєднувати mouseover і mouseout для створення інтерактивних елементів, що змінюють стиль або показують додаткову інформацію при наведенні та ховають її, коли курсор покидає область елемента.

правити

Порада

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

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

Порада

Подія mouseout спрацьовує, навіть якщо курсор переміщується між дочірніми елементами всередині батьківського блоку. Щоб уникнути цього, можна використовувати подію mouseleave, яка ігнорує внутрішні елементи.

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

Порада

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

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

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

Синтаксис

element.addEventListener('mouseout', function(event) {
  // Обробка події
});

Переглядачі

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

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

Переглядач
	66	57	11.1	53	16

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

Переглядач
	66	66	57	11.3

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

Переглядач
	15.0.0	1.0

Приклади

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

<div id="menu">Демонстраційний елемент</div>
<button id="menuButton">Натисни</button>

const menu = document.getElementById('menu');
const button = document.getElementById('menuButton');

button.addEventListener('mouseover', function() {
  menu.style.display = 'block';
});

menu.addEventListener('mouseout', function(event) {
  if (!menu.contains(event.relatedTarget)) {
    menu.style.display = 'none';
  }
});

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

const box = document.getElementById('box');

box.addEventListener('mouseover', function() {
  box.style.opacity = 1;
});

box.addEventListener('mouseout', function() {
  box.style.transition = 'opacity 0.5s ease';
  box.style.opacity = 0.5;
});