javascript - mouseover 在 img 上，但 mouseout 在 div 上

Question

我对 mouseover 和 mouseout 有一些小问题

我想在用户将鼠标放在图像中时使用鼠标悬停 (id = calendrieragenda)，但仅当他离开父 div (id = divagenda) 时才使用 mouseout，但是当用户离开他的鼠标时它不起作用从图像中移动鼠标，它激活了 mouseout 函数

var divagenda = document.getElementById('divagenda');
var calendrieragenda = document.getElementById('imageagenda');

calendrieragenda.addEventListener('mouseover', function() {
  document.getElementById('divagenda').className = 'popUpAgendaMouseOver';
});

divagenda.addEventListener('mouseout', function() {
      document.getElementById('divagenda').className = 'popUpAgendaMouseOut';

});

#divagenda {
  margin-top: 1em;
}

#imageagenda {
  width: 8%;
  position: relative;
  right: 6%;
  margin-top: 1em;
  margin-bottom: 1em;
  transition-duration: 0.5s;
  transform: translateX(-50%);
  left: 50%;
  z-index: 600;
}

.popUpAgendaMouseOver {
  border-radius : 1em;
  border : 1px rgba(250, 250, 250, .8) solid;
  background-color: #444444;
  transition: 1s;
}

.popUpAgendaMouseOut {
  border : none;
  background-color:none;
  transition: 1s;
}

<div id="divagenda">
  <a href="link" title="Lien vers l'Agenda" target="_blank">
    <img id="imageagenda" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSf_HZLgiKNGwWv6V9Urtv3P2Sfo_Liw2dwOnq_oXg6-WInr_s" />
  </a>

</div>

我做了一个 jsfiddle 来向您展示我的代码:https://jsfiddle.net/v7pkhymm/7/

非常感谢，祝您有愉快的一天!

Answer 1

您遇到的问题是您的事件从 img 向上冒泡，因此 div 也会收到该事件。

有几种方法可以防止这种情况发生。您可以在 calendrieragenda 级别添加事件监听器以停止传播:

calendrieragenda.addEventListener('mouseout', function(event) {
    event.stopPropagation();
});

或者您可以检查 divagenda 事件监听器，确定事件的目标确实是 div:

divagenda.addEventListener('mouseout', function(event) {
    if (event.target !== this) {
        return;
    }
    document.getElementById('divagenda').className = 'popUpAgendaMouseOut';

});

我更喜欢第二种方法，因为它不会创建不必要的事件监听器。