mouseover和mouseout事件触发儿童

Question

代码:

<div id="Navigation" 
    onmouseover="new Effect.toggle('Drop_Down','slide',{duration: 0.8});" 
    onmouseout="new Effect.toggle('Drop_Down','slide',{duration: 0.8});">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

如果我鼠标悬停Navigation在Drop_Down格下滑,如果我鼠标移开它向上滑动.

问题是,如果我将鼠标悬停在子Drop_Downdiv上,它也会向上滑动.

有谁知道我怎么能解决这个问题？

Answer 1

在Prototype 1.6.1中使用mouseenter和mouseleave事件代替new(但在IE中不是新的).您必须从标记中移出内联事件处理程序才能执行此操作:

<div id="Navigation">
    <div id="Drop_Down">
        <% include Navigation %>
    </div>
</div>

并在脚本中设置事件:

<script>
document.observe('dom:loaded', function() {
    $('Navigation')
        .observe('mouseenter', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
        .observe('mouseleave', function() {
            new Effect.toggle('Drop_Down','slide',{duration: 0.8})
        })
})
</script>

与mouseover和不同mouseout,这些事件不会从子元素中冒出来.他们被绑定到你绑定的确切元素,很好地解决了你的问题.