2

Какая разница между mouseleave и mouseout?

3

1 ответ 1

3

Разница событий заключается в том, что событие 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>

1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.