javascript - 只监听 mouseover 和 mouseout 事件？ 中的元素当前会触发这两个事件

Question

我如何监听 <li> 上的鼠标悬停和鼠标移出事件？将元素悬停在 <li> 内时不会触发这两个事件？

我目前有一个包含多个 <li> 的列表结构的。每个内部 <li>有几个<div>是position: relative;或 position: absolute;

听众看起来如下:

blockContainer.children[i].addEventListener("mouseover", function(e) {
...
});

blockContainer.children[i].addEventListener("mouseout", function(e) {
...
});

我在这里添加了一个 fiddle 测试:http://jsfiddle.net/L334eymv/

请注意，当您悬停蓝色 div 以及绿色 div 时，它是如何一次又一次触发的。

Answer 1

如果你只想影响目标元素，你应该使用mouseenter和 mouseleave事件。它们的行为类似于 mouseover/mouseout，只是它们不会冒泡。