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 включають реалізацію ефектів зникнення або приховання елементів після того, як користувач залишив їх область. Наприклад, це може бути корисно для зменшення зображень, закриття підказок або вимкнення додаткових анімацій.
| Порада: | Якщо на сторінці є інтерактивні елементи, які повинні закриватися або змінювати свій стан після того, як курсор покине їх область, подія |
| Порада: | Для створення анімацій з прихованням або зміною стилю при виході миші з елемента рекомендується комбінувати події |
| Порада: | Не забудьте перевіряти координати курсора через |
Синтаксис
element.addEventListener('mouseleave', function(event) {
// Обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Коли користувач наводить курсор на панель, нічого не відбувається. Але коли курсор залишає область панелі, активується подія mouseleave, яка відображає повідомлення "Ви залишили панель!". Це повідомлення поступово зникає завдяки анімації. Цей ефект може використовуватися для сповіщень або підказок, що автоматично закриваються після взаємодії з користувачем.
Цей приклад демонструє, як за допомогою подій mouseenter та mouseleave можна створити ефект збільшення елемента при наведенні курсора миші та повернення до початкового розміру після виходу курсора. Такий підхід часто використовується для інтерактивних кнопок або зображень у галереях.
const box = document.getElementById('box');
box.addEventListener('mouseenter', function() {
box.style.transform = 'scale(1.2)';
});
box.addEventListener('mouseleave', function() {
box.style.transform = 'scale(1)';
});У цьому прикладі подія mouseleave використовується для приховання підказки після того, як курсор миші покинув кнопку. Це типовий сценарій використання для підказок, меню або інших спливаючих елементів, що відображаються лише при взаємодії користувача з певними елементами сторінки.
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';
});