Jquery 메뉴 Anchor onBlur 이벤트가 Div 하위 앵커를 사용 중지합니다.

Question

JQuery 개발을 처음 사용합니다. 내 웹 사이트에 대한 사용자 지정 메뉴를 만드는 동안 onblur 이벤트 문제가 발생했습니다. 어느 누구도 제발 이걸 도와 줄 수는 없어요.

은 THS JS 바이올린 JS Fiddle

$(document).ready(function() { 
    $('#showmenu').click(function (e) { 
     e.preventDefault(); 
     this.focus(); 
     $('#serviceMenu').slideToggle("fast"); 
     $('#Contact').hide(); 
    }); 

    $('#showmenu').blur(function (e) { 
     $('#serviceMenu').hide(); 
    }); 
}); 

문제는 표시/숨기기 DIV 메커니즘이 <a> 태그를 기반으로한다는 것입니다을 찾아주세요. <a>을 클릭하면 메뉴가 잘 전환됩니다. 나는 또한 사용자가 메뉴와 나타나는 div 밖의 아무 곳이나 클릭 할 때 토글하는 메뉴를 원한다. 피들 나는 앵커에 대한 onblur() 이벤트를 추가했습니다. 즉, 내 하위 링크가 div 앵커의 onblur() 이벤트에 들어가고 메뉴가 숨겨집니다. 나는 event.propagation()을 막으려 고했지만 그게 나를 위해 일하지 못했습니다. 당신은 #의 serviceMenu 클릭 전에 이벤트 전파가 어떻게 작동하는지

여기

Answer 1

문제는, blur 이벤트를 호출 할 때, 당신은 또한 배워야한다 : Direct and delegated events 나는 (일부 의견에) 당신의 바이올린을 업데이트 : http://jsfiddle.net/M4LJh/7/

$(document).ready(function() { 
    $('#showmenu').on('click', function (e) { 
     this.focus(); 
     $('#serviceMenu').slideToggle("fast"); 
     $('#Contact').hide(); 
     return false; 
    }); 

    // prevent clickEvent to bubble up to #showmenu 
    $('#serviceMenu a').on('click', function(e){e.stopPropagation();}); 

    // hide #serviceMenu on bodyClick 
    // - anywhere but an element with propagation stopped event 
    $('body').on('click', function (e) { 
     $('#serviceMenu').hide(); 
     return false; // e.stopPropagtaion(); + e.preventDefault(); 
    }); 
});