Какая разница между mouseleave и mouseout?
-
1mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does.– Grundy ♦Commented 2 окт. 2017 в 16:09
-
learn.javascript.ru/… ........ можно было как ответ написать (имхо это более наглядно, чем в ссылке от Grundy в доках), но слишком он уж большой получается– Алексей ШиманскийCommented 2 окт. 2017 в 16:21
-
@АлексейШиманский, в доках как раз нагляднее :-)– Grundy ♦Commented 3 окт. 2017 в 6:08
Добавить комментарий
|
1 ответ
Разница событий заключается в том, что событие mouseout всплывает, а mouseleave - нет
Это означает, что обработчик mouseout стоящий на контейнере будет ловить события mouseout от дочерних элементов, в то время как mouseleave - только от текущего элемента.
Пример ниже показывает это поведение: лог с mouseout будет появляться, при уходе с любого элемента, в то время как mouseleave - Только при выходе за границы контейнера, на котором и висит обработчик.
document.getElementById('root').addEventListener('mouseleave', function(e) {
console.log('mouseleave', e.target.id);
});
document.getElementById('root').addEventListener('mouseout', function(e) {
console.log('mouseout', e.target.id);
});
div {
border: 1px solid red;
}
#root {
position: relative;
width: 400px;
height: 200px;
}
#a {
width: 300px;
height: 150px;
}
#b {
width: 200px;
height: 100px;
}
#c {
width: 100px;
height: 50px;
}
<div id="root">
Root block
<div id="a">
A block
<div id="b">
B block
<div id="c">C block</div>
</div>
</div>
</div>