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

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

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

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

Щоб використовувати подію mouseleave, можна скористатися стандартним методом addEventListener. Наприклад:

const box = document.getElementById('box');
box.addEventListener('mouseleave', function() {
  console.log('Курсор покинув елемент.');
});

Об'єкт події надає корисну інформацію, таку як координати миші (clientX, clientY), і можна перевірити, на який саме елемент курсор миші виходить, використовуючи властивість relatedTarget. Це може бути корисно для більш детального аналізу взаємодії з елементом.

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

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

Переглядачі

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

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

Переглядач
	30	10	7	17	12	5.5

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

Переглядач
	4.4	30	10	7

Приклади

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

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

const box = document.getElementById('box');
box.addEventListener('mouseenter', function() {
  box.style.transform = 'scale(1.2)';
});

box.addEventListener('mouseleave', function() {
  box.style.transform = 'scale(1)';
});

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

const tooltip = document.getElementById('tooltip');
const button = document.getElementById('button');

button.addEventListener('mouseenter', function() {
  tooltip.style.display = 'block';
});

button.addEventListener('mouseleave', function() {
  tooltip.style.display = 'none';
});