當我將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