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

【问题标题】：javascript triggers "onmouseover" and "onmouseout" when i hover the div in another div当我将 div 悬停在另一个 div 中时，javascript 会触发“onmouseover”和“onmouseout”
【发布时间】：2013-05-04 22:02:53
【问题描述】：

我正在为我的新网站设计网格布局。 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），该函数被再次调用。我不明白！

你能帮帮我吗？谢谢！

【问题讨论】：

标签： php javascript opacity

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这是因为默认的 JavaScript 事件冒泡概念。当元素上发生某些事件时（例如在本例中为model_title），该事件会冒泡到父文档元素。

由于父 div (model_container_invisible) 有一个事件处理程序，因此无论事件实际发生在什么地方，它都会被执行。

所以为了避免这个问题，你应该验证 eventSource 是否真的是model_container_invisible 并执行所需的逻辑。

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

【讨论】：

嗨，sampath，我测试了它并且它工作正常。谢谢！但我现在正在使用 nelsons 方法，它更短