наведение мыши и события mouseOut, стреляющие в детей

Код:

<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 отделение скатывается, и если я mouseout оно скользит.

Проблема состоит в том если я наведение мыши ребенок Drop_Down отделение это также скользит.

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

6
задан Brian Tompsett - 汤莱恩 21 July 2019 в 16:48
поделиться

2 ответа

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

В отличие от mouseover и mouseout , эти события не пузырь из дочерних элементов. Они срабатывают на том элементе, к которому вы их привязываете, что прекрасно решает вашу проблему.

11
ответ дан 8 December 2019 в 18:37
поделиться

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

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

2
ответ дан 8 December 2019 в 18:37
поделиться
Другие вопросы по тегам:

Похожие вопросы: