Question

我有这个JS代码：

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

    elem.observe('mouseout', function() {
        elem.next().hide();
    });
});

elem.next（）指向一个div，它有display：none作为样式。当我将鼠标放在观察元素上时，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>，你观察到鼠标悬停事件会从这些元素冒出来并命中div上的观察者。此外，因为光标在技术上不在<div>之上，所以mouseout事件也会触发。

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

Answer 2

问题是因为你在被观察对象中有内部元素。当您输入div时，鼠标悬停会触发，但是当您将鼠标放在图像上时它会触发鼠标输出，因为鼠标移开就是这样。

另一种解决方案，而不是像Geek Num 88那样观察div的所有孩子们说是将mouseout改为mouseleave 而将mouseover改为mouseenter

闪烁div和mouseover / mouseout事件和Prototype？

2 个答案: