6

编码：

<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>

如果我将鼠标悬停在NavigationdivDrop_Down上，它会向下滑动，如果我将鼠标移出，它会向上滑动。

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

有谁知道我该如何解决？

4

2 回答 2

11

使用mouseenterandmouseleave事件代替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>

与mouseoverand不同mouseout，这些事件不会从子元素中冒泡。它们会在您将它们绑定到的确切元素上触发，从而很好地解决您的问题。

于 2009-10-30T18:35:12.247 回答
2

作为替代的通用（非原型特定）答案

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

于 2009-10-31T02:08:06.433 回答