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 для створення інтерактивних елементів, що змінюють стиль або показують додаткову інформацію при наведенні та ховають її, коли курсор покидає область елемента.
| Порада: | Якщо ви маєте справу зі складними ієрархіями елементів і хочете обробляти вихід курсора з усього батьківського блоку, подія |
| Порада: | Подія |
| Порада: | Подія |
Синтаксис
element.addEventListener('mouseout', function(event) {
// Обробка події
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
Цей приклад демонструє, як подія mouseout може використовуватися для приховання тексту всередині блоку, коли курсор залишає елемент. Коли курсор наводиться на блок, текст з'являється з плавним ефектом, і коли курсор виходить з блоку, текст поступово зникає. Цей підхід корисний для створення підказок або додаткової інформації, яка з'являється тільки під час взаємодії з користувачем.
Цей приклад демонструє, як можна використовувати подію mouseout для приховання меню після того, як користувач залишає його область. Якщо курсор покидає меню і не переходить на жоден з дочірніх елементів, меню автоматично ховається.
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';
}
});У цьому прикладі використовується подія mouseout для створення ефекту плавного зменшення прозорості елемента, коли курсор покидає його область. Це може бути корисно для візуальних ефектів, що роблять інтерфейс більш інтерактивним і динамічним.
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;
});