أحداث 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>

إذا كنت mouseover Navigation ال Drop_Down ينزلق Div لأسفل ، وإذا كنت تنزلق.

المشكلة هي إذا كنت Mouseover الطفل 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