어린이에게 발사되는 마우스 오버 및 마우스 아웃 이벤트

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 그만큼 Drop_Down div가 미끄러 져 내려 가면 마우스 아웃이 끝나면 미끄러 져 들어갑니다.

문제는 내가 아이를 마우스 위에 놓는 것입니다 Drop_Down Div도 미끄러 져 들어갑니다.

내가 어떻게 고칠 수 있는지 아는 사람이 있습니까?

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

대체, 일반 (프로토 타입 별) 답변으로

이것은 이벤트 버블 링으로 인해 발생합니다. 하위 노드에서 취소하는 방법을 포함한 자세한 정보는 다음과 같습니다.http://www.quirksmode.org/js/events_order.html