왜이 스크립트는 한 번의 클릭이 아닌 두 번 클릭에서만 작동합니까?

Question

코드 :

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
$(document).ready(function() { 

$('.click1').click(function() { 
    $(".show1").fadeIn(400); 
}); 

$('body, .click1').click(function() { 
    $('.show1').hide(); 
}); 
}); 
</script> 

작품 이상하지만, 그것이 두 번 클릭해야하는 fadeIn을하기 위해서는 스크립트. 한 번 클릭 할 때 표시되도록 변경하려면 어떻게해야합니까?

Answer 1

, 당신은 때를 위해 듣고 클릭은 페이지의 아무 곳에서나 일어납니다). 해당 이벤트가 발생하면 구체적으로 클릭 한 항목 (evt.target)을 볼 수 있고 거기에서 조건부로 기능을 실행할 수 있습니다.

http://codepen.io/snypelife/pen/Fcjiw

$(function() { 

     $('body').on('click', function (evt) { 
     if($(evt.target).hasClass('click')){ 
      $('.show').toggle('fade'); 
     } else { 
      $('.show').fadeOut(); 
     } 
     }); 

}); 

Answer 2

click 이벤트 (대부분의 다른 이벤트)는 부모 요소에 버블 링합니다. 이것은 '.click1'요소를 클릭 할 때이 요소에서 먼저 트리거 된이 이벤트가 '본문'에서 트리거된다는 것을 의미합니다. 그리고 'body'의 이벤트 리스너는 즉시 요소를 숨 깁니다. 당신은 이벤트 버블 링 방지하기 위해 여기에) Event.stopPropagation을 (사용할 수 있습니다 :이 경우 문서 (의 본체에 이벤트 리스너를 적용 할 수 있습니다, 사용 사례를 들어

$('.click1').click(function (e) { 
    $(".show1").fadeIn(400); 
    e.stopPropagation(); 
}); 

$('body').click(function() { 
    $('.show1').hide(); 
});