鼠标悬停和mouseout事件对儿童开枪 [英] mouseover and mouseout events firing on children

问题描述

代码：

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

如果我鼠标悬停导航 Drop_Down div滑下来，如果我的mouseout它向上滑动。

If I mouseover the Navigation the Drop_Down div slides down, and if I mouseout it slides up.

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

The problem is if I mouseover the child Drop_Down div it also slides up.

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

Does anyone know how i can fix that?

推荐答案

使用 mouseenter 和 mouseleave 事件 新的在原型1.6.1中 （但不是新的在IE）。您必须将您的内嵌事件处理程序从您的标记中移除才能执行此操作：

Use the mouseenter and mouseleave events instead new in Prototype 1.6.1 (but not new in IE). You have to move your inline event handlers out of your markup to do this:

<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 ，这些事件不会从子元素中浮起来。他们被触发了你绑定的确切元素，解决你的问题很好。

Unlike mouseover and mouseout, these events do not bubble from child elements. They are fired on the exact element you bind them to, solving your issue nicely.

这篇关于鼠标悬停和mouseout事件对儿童开枪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！