자녀가 부모 클릭을 클릭하는 것을 방지하는 방법

Question

나는 다음 코드 구조를 수행하고 addClass item_box_popup과 removeClass item_box을 클릭하면 item_box div을 수행했습니다.

<div class="item_box"> <!--This is the small div which when clicked changes to the item_box_popup div--> 
    <div class="name">...</div> 
    <div class="detail">...</div> 
</div> 

<div class="item_box_popup"> <!--This div expands to show the detail and the children in it has a click event--> 
    <div class="name">...</div> 
    <div class="detail">...</div> 
</div> 

item_box div에는 자식이 아닌 클릭 이벤트가 있습니다. 작업을 클릭하면 item_box_pop div을 addClass 및 removeClass으로 변경하는 것입니다.

item_box_popup에는 클릭 이벤트가 없지만 하위 이벤트에 정의 된 클릭 이벤트가 있습니다. 등의 클릭 이벤트를 정의하기 위해 delegate을 사용했습니다.

item_box div을 클릭하면 .item_box_popup .name에 정의 된 클릭 이벤트가 트리거되는 것이 문제입니다. 이는 .item_box에 대한 클릭에 정의 된 변경 클래스 때문일 수 있습니다.

.item_box 클릭 할 때 클릭 이벤트가 어린이에게 표시되는 것을 원하지 않습니다. undelegate을 시도하여 item_box 하위 항목을 클릭하는 것을 중지하고 클릭 클래스에 정의 된 변경 클래스를 수행했지만 작동하지 않습니다.

는

.item_box_popup

$("body").delegate('.item_box_popup .name, .item_box_popup .detail','click', function(e){ 
    //working code here for this 
}); 

e.stopPropagation();에 대한 .item_box

$('.slide > div').bind('click',function(e) { 
    if(!$(this).hasClass('item_box_popup')){ 
     var index=$('.slide > div').index(this); 
      $(this).removeClass('item_box'); 
      $(this).addClass('item_box_popup');  
     Nomad.config.firstVisibleItem=index;<!--This is to set the position for .item_box_popup-->    
    }   
}); 

click 이벤트에 대한 클릭 이벤트 당신은 '버블'에서 이벤트를 방지 할 필요가 .item_box

Answer 1

event.preventDefault()를 추가해보십시오. 통화가 끝나고 나면 기본 동작이 중지됩니다. a 요소의 기본 동작

정확히 어디에 전화를 걸지 또는 js 코드를 보지 않고 문제를 해결할 수 있는지 말할 수 없습니다. html은 문제가있는 곳이 아니며, js 코드입니다. 그래서이 (또는 내가 타이핑하는 동안 게시 한 다른 답변이 작동하지 않는다면) js를 포함하도록 게시물을 편집 할 수 있습니까?

업데이트 :

내가 JSFiddle에 코드를 복사하여 item_box 클릭 핸들러 호출) (AN e.stopPropagation을 추가, 나는 예상대로 작동했습니다 http://jsfiddle.net/chkaQ/2/

를 클릭 item_box 하위 div에서 item_box_popup으로 변경하고 item_box_popup 하위 클릭 이벤트를 실행하지 않습니다. 잘못 했습니까, 아니면 원하지 않는 것입니까?

Answer 2

의 기본 클릭 핸들러를 비활성화 stopPropagation을 사용하는 부모까지 : http://api.jquery.com/event.stopPropagation/