闪烁div和mouseover/mouseout事件以及Prototype

Question

我有这个JS代码：

$$('.someclass').each(function(elem) {
    elem.observe('mouseover', function() {
        elem.next().show();
    });
    elem.observe('mouseout', function() {
        elem.next().hide();
    });
});

elem.next（）指向一个样式为display:none的div。当我把鼠标放在被观察的元素上时，div显示出来，但它开始闪烁。当我移动鼠标时，它会疯狂地眨眼。我还尝试了mouseenter和mouseleave，得到了相同的结果。我希望div出现，不要闪烁。当鼠标移出div时，它应该会再次消失。这是HTML:

<div class="someclass">
    <a href="...">
        <img src="...">
    </a>
</div>
<div style="display: none;">my div that should not blink</div>

知道可能出了什么问题吗？

Answer 1

由于HTML的结构，mouseout和mouseover事件不断触发。

因为您在div中有一个<a href>和一个<img>，所以您正在观察mouseover事件从这些元素中弹出，并击中div上的观测者。此外，因为从技术上讲，光标不在<div>的顶部，mouseout事件也会触发。

我把这个放在一起http://jsfiddle.net/pkA5n/并在我的Windows桌面上所有可用的浏览器（IE10/Chrome/FFirefox）中试用了它，我没有看到任何闪烁。

Answer 2

问题是因为观察到的对象内部有内部元素。当您在div上输入时，mouseover会触发，但当您将鼠标放在图像上时，它会触发mouseout，因为mouseover的工作方式是这样的。

另一个解决方案不是像Geek Num 88所说的那样观察div的所有子级，而是将mouseout更改为mouseleaf，更改mouseover为mouseenter