événements mouseover et mouseout tirant sur des enfants

Question

Le code:

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

Si je passe la souris sur la Navigation , la div Drop_Down glisse vers le bas, et si je la souris, elle glisse vers le haut.

Le problème est que si je passe la souris sur la balise Drop_Down enfant, elle glisse également vers le haut.

Quelqu'un sait-il comment résoudre ce problème?

Answer 1

Utilisez le mouseenter et mouseleave événements à la place nouveautés Prototype 1.6.1 (mais pas nouveau dans IE). Pour ce faire, vous devez déplacer vos gestionnaires d’événements intégrés hors de votre balise:

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

Et configurez les événements dans le script:

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

Contrairement à mouseover et mouseout , ces événements ne disparaissent pas des éléments enfants. Ils sont tirés sur l'élément exact auquel vous les liez, résolvant ainsi votre problème.

Answer 2

Comme alternative, réponse générique (non spécifique au prototype)

Ceci est dû à la formation d'événements. Plus d'informations, y compris comment l'annuler dans les nœuds enfants, ici: http://www.quirksmode.org/js/events_order.html