Подія mouseleave — курсор покинув елемент у JavaScript

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

Подія 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

Приклади

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

<header>
  <h2 class="title">HTML Events: mouseleave</h2>
  <p class="description">Приховування елемента при виході курсора миші з його області за допомогою mouseleave.</p>
</header>
<main>
  <div class="result">
    <!-- Інтерактивна панель -->
    <div id="notificationPanel" class="panel">
      Наведіть на мене курсор, щоб побачити повідомлення.
    </div>
    <p id="message" class="message hidden">Повідомлення: Ви залишили панель!</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.panel {
  width: 300px;
  padding: 20px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 20px;
  transition: opacity 0.3s ease;
}

.message {
  text-align: center;
  font-size: 18px;
  color: #333;
}

.hidden {
  display: none;
}

.visible {
  display: block;
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

// Отримуємо елементи панелі та повідомлення
const panel = document.getElementById('notificationPanel');
const message = document.getElementById('message');

// Додаємо обробник події mouseleave для панелі
panel.addEventListener('mouseleave', function () {
  // Показуємо повідомлення і запускаємо анімацію зникнення
  message.classList.remove('hidden');
  message.classList.add('visible');

  // При завершенні анімації приховуємо повідомлення
  setTimeout(function () {
    message.classList.remove('visible');
    message.classList.add('hidden');
  }, 3000); // Приховуємо після завершення анімації
});
//# sourceURL=pen.js

<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';
});