1

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

你能帮我么？谢谢！

4

2 回答 2

1

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

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

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

于 2013-05-04T13:58:30.907 回答
0

This happens because of default JavaScript event bubbling concept. When some event occurs on an element (like in this case the model_title) the event bubbles up to the parent document element.

Since the parent div (model_container_invisible) has one event handler, it will be executed irrespective of where exactly inside the event has actually occurred.

So to avoid this issue, you should verify if the eventSource is actually model_container_invisible and perform required logic.

Following link might help you : http://www.javascripter.net/faq/eventtargetsrcelement.htm

于 2013-05-04T14:02:33.567 回答