Jquery 메뉴 : mouseover/mouseout moseenter/mouseleave craziness

Question

첫 번째 레벨 메뉴 항목이 li 요소이고 두 번째 수준이 자체 li 요소가있는 ul 블록 인 간단한 메뉴를 만들려고합니다. 정말 밝다. CSS는 모든 하위 메뉴에 대해 display : none을 포함하고 있으며 마우스 오버가 첫 번째 레벨 항목에서 실행될 때 올바른 ul 요소를 표시 한 다음 SUBmenu (ul 요소)에서 mouseout이 실행될 때 숨기기 만하면됩니다. 나는 무슨 일이 일어 났는지 이해하기 위해 어떤 문제가있다. 파이어 폭스에서 모든 작업이 순조 롭습니다. 첫 번째 레벨 메뉴에 입력 - 하위 메뉴에 입력 - 하위 메뉴에서 나가기는 적절한 이벤트 시퀀스가 ​​트리거되었음을 보여줍니다. menuOn subMenuOn subMenuOff menuOff. IE에서 같은 이벤트 시퀀스 subMenuOff가 subMenuOn 다음에 갑자기 트리거되는 이유를 이해할 수 없습니다. 그 결과 하위 메뉴가 즉시 사라집니다. 부부 (subMenuOn subMenuOff)가 같은 시간에 서브 메뉴를 사용하지 못하도록 trigegred 한 것과 같습니다. 마우스 오버 또는 마우스 센터를 사용하여 변경하지 마십시오. 호버를 사용한다고해서 상황이 바뀌지는 않습니다. 무슨 일이 일어 났는지 생각해? 이것은 코드입니다 :

$(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); 
} 

Answer 1

일부 브라우저/프레임 워크는 이벤트를 버블 링합니다.

예 : (AFA 브라우저로가는 방법이 확실하지 않습니다.) 마우스가 요소에서 자식 요소로 이동할 때 브라우저 하나가 트리거됩니다. 또 다른 요소는 부모 요소에 의해 잡힐 수있는 마우스 오버를 트리거하지 않지만 트리거합니다.

Answer 2

mouseover 및 mouseout 이벤트에 몇 가지 미친 문제가 있습니다.

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

애니메이션을 중지하는 것이 중요했습니다. 그것이 없으면 애니메이션은 내 메뉴 위로 마우스를 놓은 후에도 계속 발사 할 것입니다.