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 div向下滑动，如果我鼠标移开它会向上滑动。

问题是，如果我将鼠标悬停在子Drop_Down div上，它也会向上滑动。

有谁知道如何解决这个问题？

Answer 1

使用mouseenter和mouseleave事件代替 new in Prototype 1.6.1 （但在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不同，这些事件不会从子元素冒泡。他们被绑定到你绑定的确切元素，很好地解决了你的问题。

Answer 2

作为替代的，通用的（不是原型特定的）答案

这是由Event Bubbling引起的。更多信息，包括如何在子节点中取消它，这里： http://www.quirksmode.org/js/events_order.html

mouseover和mouseout事件触发儿童

2 个答案: