Jquery菜单：mouseover / mouseout moseenter / mouseleave craziness

I am trying to craft a simple menu where the first level menu entries are li elements and second level are ul blocks with their own li elements. Nothing really bright. Css contains display:none for all submenus and my (optimistic) idea was simply to show proper ul elements when mouseover is fired on first level entries then to hide them when mouseout is fired on the SUBmenu (the ul element). I have some problem to understand what happened. On Firefox all is nice and the action sequence: enter in the first level menu - enter in submenu - exit from submenu shows that the proper event sequence is triggered: menuOn subMenuOn subMenuOff menuOff. I cannot understand why in IE in the same event sequence subMenuOff is triggered suddenly after subMenuOn: the result is that the submenu immediately disappears. It is like the couple (subMenuOn subMenuOff) was trigegred in the same time disabling submenus. No change using mouseover or mouseenter. Using hover does not change the situation. Have some idea about what happened? This is the code:

我正在尝试制作一个简单的菜单,其中第一级菜单条目是li元素,第二级是具有自己的li元素的ul块。没什么好亮的。对于所有子菜单,Css包含display:none,我的(乐观)想法只是在第一级条目上触发mouseover时显示正确的ul元素,然后在SUBmenu(ul元素)上触发mouseout时隐藏它们。我有一些问题需要了解发生了什么。在Firefox上一切都很好并且动作序列:在第一级菜单中输入 - 在子菜单中输入 - 从子菜单退出显示触发了正确的事件序列:menuOn subMenuOn subMenuOff menuOff。我无法理解为什么在IE中同一事件序列subMenuOff在subMenuOn之后突然被触发:结果是子菜单立即消失。就像这对夫妇(subMenuOn subMenuOff)在同一时间禁用子菜单一样。使用鼠标悬停或鼠标中心无法更改。使用悬停不会改变这种情况。对发生的事情有所了解?这是代码:

   $(document).ready(
        function(){ 
        enableMenu();                           
    }
);

var flagOnSubMenu = false;

function enableMenu(){ 
    $('li.menu').bind('mouseenter', menuOn);            
    $('li.menu').bind('mouseleave', menuOff);           
    $('ul.sottomenu').bind  ('mouseenter', subMenuOn);  
    $('ul.sottomenu').bind  ('mouseleave', subMenuOff); 
}

function menuOn(){ 
    scrivi('menuOn');
    if (flagOnSubMenu){
        scrivi('noAction');
        return;
    }

    var subMenuId;

$('ul.sottomenu').hide();                                            
        subMenuId = $(this).find("ul").attr('id');
        $('#' + subMenuId ).show();


}

function menuOff(){
    scrivi('menuOff<br>');
    return;
}

function subMenuOn(){
    scrivi('subMenuOn');
    flagOnSubMenu = true;
}

function subMenuOff(){ 
    scrivi('subMenuOff');
    flagOnSubMenu = false;
    $(this).hide();             
}

function scrivi(arg){ 
    $('#debug').html( $('#debug').html() + ' ' + arg );
}

2 个解决方案

#1

I had some crazy issues with mouseover and mouseout events.

我遇到了鼠标悬停和鼠标移动事件的一些疯狂问题。

$("#menu>li").hover(
    function(){
        $("#menu *:animated").stop(true,true).hide(); //stop the madness
        $('ul',this).slideDown();
    },
    function(){
        $('ul',this).slideUp("fast");
    }
);

Stopping the animations was the key for me. Without that, animations would keep firing long after I was finished mousing over my menu.

停止动画是我的关键。如果没有这个,动画会在我完成鼠标悬停在我的菜单上后继续射击。

#2

Some browsers/frameworks bubble the events, some don't.

有些浏览器/框架会冒泡事件,有些则没有。

i.e. (I'm not sure which way around it goes AFA browsers) One browser will trigger mouseout when the mouse moves from an element to a child element. Another will not but will trigger a mouseover that can be also caught by the parent element.

即(我不知道它绕AFA浏览器的方向)当鼠标从元素移动到子元素时,一个浏览器将触发mouseout。另一个不会,但会触发一个鼠标悬停,也可以被父元素捕获。

#1