사용자가 div 태그 외부를 클릭 할 때 div 태그가 보이지 않는 경우

Question

div 태그가 있고이 div 태그 안에있는 사용자 정의 격자에 검색 결과가 채워집니다.

사용자가 검색 버튼을 클릭하면 위의 div 태그에 결과가 표시됩니다.

사용자가 div 태그 외부를 클릭 할 때 위의 div 태그를 닫아야한다는 요구 사항이 있습니다.

Google 검색 자동 comlete와 비슷합니다.

미리 감사드립니다.

Answer 1

기본 아이디어

1. 와이어 사업부를 숨길 body 태그에 온 클릭 이벤트입니다.
2. div 태그에 onclick 이벤트를 연결하고 이벤트 버블 링을 중지합니다.

는 Event order

이 true로 이벤트의 cancelBubble 속성을 설정해야합니다은 Microsoft 모델에서

이벤트 버블 링을 중지하려면을 참조하십시오.

window.event.cancelBubble = true 

W3C 모델에서는 이벤트의 stopPropagation() 메서드를 호출해야합니다. 이 같은

jQuery를에

e.stopPropagation() 

Answer 2

, 뭔가 :

$('body').click(function(ev){ 
    if (!$(this).hasClass('your_result_container_classname') { 
    // code to hide result div 
    $('body').unbind('click'); // remove event handler. add again when results shown. 
    } 
});