события 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 div Drop_Down скользит вниз, а при наведении курсора мыши - вверх.

Проблема в том, что если я наведу курсор мыши на дочерний элемент Drop_Down , он тоже сдвинется вверх.

Кто-нибудь знает, как я могу это исправить?

Answer 1

Используйте mouseenter и mouseleave события вместо этого новые в Прототип 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

В качестве альтернативного, общего (не специфичного для прототипа) ответа

Это вызвано Bubbling Event. Дополнительная информация, в том числе, как отменить ее в дочерних узлах, здесь: http://www.quirksmode.org/js/events_order.html