проблемы с зависанием javascript

Question

Когда я использую jhoery's .hover () или javascript mouseenter (), событие срабатывает не только тогда, когда мышь входит в элемент, но и когда мышь пересекает любой элемент в этом элементе.Как я могу остановить это, чтобы оно срабатывало только тогда, когда мышь входит или выходит из этого элемента, а дочерние элементы не влияют на событие?

       $(document).ready(function(){
            introAnimation();

            $('#nav-item1').hover(function() {
                $('#createSub').slideDown(300);
            });
            $('#nav-item1').mouseout(function() {
                $('#createSub').slideUp(300);
            });

            $('#nav-item2').hover(function() {
                $('#manageSub').slideDown(300);
            });
            $('#nav-item2').mouseout(function() {
                $('#manageSub').slideUp(300);
            });
            $('#nav-item3').hover(function() {
                $('#storeSub').slideDown(300);
            });
            $('#nav-item3').mouseout(function() {
                $('#storeSub').slideUp(300);
            });
        });

Answer 1

У наведения есть метод отмена. Нет необходимости в событии mouseout, которое срабатывает при наведении указателя мыши на вложенный дочерний элемент:

   $(document).ready(function(){
        introAnimation();

        $('#nav-item1').hover(function() {
            $('#createSub').slideDown(300);
        },function() {
            $('#createSub').slideUp(300);
        });
        $('#nav-item2').hover(function() {
            $('#manageSub').slideDown(300);
        },function() {
            $('#manageSub').slideUp(300);
        });
        $('#nav-item3').hover(function() {
            $('#storeSub').slideDown(300);
        },function() {
            $('#storeSub').slideUp(300);
        });
    });

Answer 2

добавьте это в обработчик:

if( ev.target !== this ){ return; }

ev.target - это то, что вызывает событие мыши.this - это то, к чему вы привязали событие