자동 완성 검색 제안 드롭 다운 팝업

Question

내가 텍스트 상자 값을 변경할 때 팝업 div를 만들려고하는데 div 외부의 아무 곳이나 클릭하여 닫을 수 있습니다 (표시 여부 : 없음). Google 제안 드롭 다운 메뉴와 유사합니다.

div 또는 외부에서 마우스 클릭이 발생한 날씨를 어떻게 알 수 있습니까?

javascript 및 jsp를 사용하여 구현해야합니다.

도와주세요.

Answer 1

JQuery와 솔루션은

$("body > div").click(function() { 
if ($(this).attr("id") == "div-id") { 
    // inside the DIV 
} else { 
    // not inside the DIV 
} 
}); 

또는

$("html").click(function (e) 
{ 
if (e.target == document.getElementById("div-id")) 
    alert("Inside DIV"); 
else 
    alert("Outside DIV!"); 
}); 

것 또는 자바 스크립트 코드 조각은 다음과 같이 될 것이다 :

<script type="text/javascript"> 
document.onclick=check; 
function check(e){ 
var target = (e && e.target) || (event && event.srcElement); 
var obj = document.getElementById('div-id'); 
if(target!=obj){obj.style.display='none'} 
} 
</script> 

Answer 2

한 가지 방법은 전체 화면 (보이지 않음)을 덮는 div를 팝업하고 두 div의 클릭을 캡처하여 두 팝업 div를 닫는 것입니다. body 태그에서 클릭 수를 캡처 할 수도 있습니다. 그러면 div 외부의 아무 곳에서나 클릭을 잡을 수 있습니다 (또는 이벤트가 거품이 나면 div 내에서 일부 테스트를 수행 할 수 있습니다).

때로는 마우스를 몇 초 동안 누르면 메뉴가 사라지는 팝업 CSS 메뉴와 같은 시간 제한을 사용하는 것이 더 쉬운 방법 일 수 있습니다. 당신은 onmouseleave 이벤트를 잡아 타이머를 시작하고, 또 다른 onmouseenter이 없다면 2 초 후에 팝업 div를 숨길 수 있습니다.

희망이 도움이됩니다.

Answer 3

여기 jQuery로 예입니다. "test"텍스트를 클릭하면 다른 텍스트가 나타납니다. 새로 등장한 텍스트 이외의 다른 곳을 클릭하면 사라집니다.

클릭 이벤트가 내부에서 발생한 경우 (이 경우 .toggle 개체) 여기를 클릭하면 e.stopPropagation()으로 전화가 전달되어 더 이상 전체 창으로 전파되지 않기 때문입니다. 그러나 클릭이 다른 곳에서 발생하면 창에 직접 전파되어 .toggle이 사라집니다.

jsfiddle에서 작동하는 example을 참조하십시오.

<script src="js/jquery-1.4.4.min.js"></script> 
<script> 
    $(function(){ 
     $('.test').bind('click', function(e){ 
      $('.toggle').fadeIn(); 
      e.stopPropagation(); 
     }); 
     $('.toggle').bind('click', function(e){ 
      e.stopPropagation(); 
     }); 
     $(document).bind('click', function(){ 
      $('.toggle').fadeOut(); 
     }); 
    }); 
</script> 

<a class="test" href="#">test</a> 
<div class="toggle">asdasdsa</div>