当我将div悬停在另一个div中时，javascript会触发“ onmouseover”和“ onmouseout”

Question

我正在为新网站进行网格布局。 PHP代码：

echo"<div class='model_container_invisible' onMouseOver='fade(this, 0)' onMouseOut='fade(this, 1)'>";
            echo"<span class='model_title_wrapper'>";
                echo"<span class='model_title'>Ancient Dragon</span>";
                echo"<span class='model_designer'>designed by Kamiya Satoshi</span>";
            echo"</span>";
            echo"<img class='model_img' src='img/models/001.jpg' />";
echo"</div>";

这是在网格元素上。 图像的不透明度为0.5，当我用js函数fade（）悬停元素时，我想更改它。 这是它的代码：

function fade(elem, direction)
{
/* if(elem.className == "model_container_invisible")
    elem.className = "model_container_visible";
else
    elem.className = "model_container_invisible"; */

var img = elem.getElementsByTagName("img")[0]; //das Bild

if(direction == 0) //einblenden
{
    alert("fadein, this: "+elem);
    img.style.opacity = 0.5;

    var aktiv = window.setInterval(function() {
        img.style.opacity = String(Number(img.style.opacity) + .05);
        if(Number(img.style.opacity) >= 1.0) {
            window.clearInterval(aktiv);    

        }
    }, 8);
}
else //ausblenden
{
    alert("fadeout, this: "+elem);
    img.style.opacity = 1;

    var aktiv = window.setInterval(function() {
        img.style.opacity = String(Number(img.style.opacity) - .05);
        if(Number(img.style.opacity) <= 0.5) {
            window.clearInterval(aktiv);    

        }
    }, 16);
}
}

但是，当我的鼠标指针从div移到另一个div时（例如，从model_title_wrapper移至model_titel），该函数将再次调用。 我不明白！

你能帮我么？ 谢谢！

Answer 1

使用onmouseenter而不是onmouseover因为后者会在将onmouseenter悬停在子元素上时触发事件，而onmouseenter不会（事件不会冒泡）。

查看有关应使用的onmouseenter/onmouseleave事件的信息：

http://www.quirksmode.org/js/events_mouse.html#mouseenter

Answer 2

发生这种情况是由于默认的JavaScript事件冒泡概念。 当元素上发生某个事件时（例如本例中的model_title ），该事件model_title父文档元素。

由于父div（ model_container_invisible ）具有一个事件处理程序，因此无论事件实际发生在何处，都将执行它。

因此，为避免发生此问题，您应该验证eventSource是否实际上是model_container_invisible并执行所需的逻辑。

以下链接可能会帮助您： http : //www.javascripter.net/faq/eventtargetsrcelement.htm