컨테이너 트리거 기능을 중지하는 방법

Question

.hidden이 표시 될 lt (제목 또는 아이콘이나 공백을 클릭하는 모든 것을 포함)를 클릭 한 후 .hidden이 표시되지 않으면 숨겨집니다. 그러면 클릭 만하는 방법 .icon.hidden은 숨김 상태가됩니까? 클릭 .icon 아무것도 일어나지 후 .icon 때 다음 시간 이후에 .lt 클릭 기능을 실행 숨기기도 클릭 트리거 .icon.lt을 클릭, 내부 .lt 때문에

지금은 작동하지 않습니다 ... 것 같아요?

$('.icon').on({'click': function(e) { 
    e.stopPropagation(); 
    //... 
}); 

Answer 1

이 보이는 위의 스크립트는 숨겨진 직선을 확인할 수 있습니다. if($('.hidden').is(':hidden')){

---

아래와 같이 .stopPropagation()을 입력하면 이벤트가 트리에서 부모까지 버블 링되지 않습니다.

$('.icon').on({'click': function(e) { 
    e.stopPropagation();    //<----it stops the event bubbling 
    if($('.hidden').is(':visible')){ //<----this should also be changed to this 
     var src="a"; 
     $('.icon img').attr('src', src); 
     $('.hidden').hide(); 
    } 
}); 

Answer 2

.stopPropagation()는 당신이 필요하지만, 당신이 if 상태 코드에 문제가 있습니다 :

$('.lt').on({'click': function() { 
    if(!$('.hidden').is(':visible')){ //<----change this way here 
     var src="b"; 
     $('.icon img').attr('src', src); 
     $('.hidden').show(); 
    } 
}); 

에서 중첩 된 요소의 이벤트의 전파를 중지해야처럼

$('.lt').on({'click': function() { 
    if(!$('.$('.hidden').is(:visible)')){ 
     var src="b"; 
     $('.icon img').attr('src', src); 
     $('.hidden').show(); 
    } 
}); 
$('.icon').on({'click': function() { 
    if($('.$('.hidden').is(:visible)')){ 
     var src="a"; 
     $('.icon img').attr('src', src); 
     $('.hidden').hide(); 
    } 
}); 

<div class="lt"> 
    <div class="title"> 
    </div> 
    <div class="icon"> 
     <img src="a"> 
    </div> 
    <div class="hidden"> 
    </div> 
</div> 

.hidden{display:none;}