события mouseover и mouseout, стреляющие в детей - PullRequest
Новая
       15

события mouseover и mouseout, стреляющие в детей

6 голосов
/ 30 октября 2009

код: 

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

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

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

Ответы [ 2 ]

11 голосов
/ 30 октября 2009

Вместо этого используйте 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, эти события не всплывают от дочерних элементов. Они стреляют по тому элементу, с которым вы их связываете, прекрасно решая вашу проблему.

2 голосов
/ 31 октября 2009

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

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

...