jQuery가 정확히 묶인 이벤트 만 발생시키는 방법

Question

나는 바깥 쪽과 안쪽 div에 클릭 이벤트를 바인딩해야하는 시나리오가 있지만, 내부 div를 클릭하면 두 개의 클릭 이벤트가 발생합니다. 및 내부 div 바인딩 이벤트.

내부 div에 대한 정확한 이벤트는 어떻게 만듭니 까?

여기에 내가 jsfiddle 데모를 첨부 :

http://jsfiddle.net/mochatony/FkCmH/8/

Answer 1

당신은 그 이름에서 알 수 있듯이 않는 .stopPropagation 방법을 사용하여 부모에 버블 링에서 이벤트를 방지 할 수 있습니다. 업데이트 링크 : http://jsfiddle.net/EQpA2/가

$('#big-box').click(function(){ 
    console.log('blue box');  
}); 

$('#small-box').click(function(e){ 
    e.stopPropagation(); 
    console.log('red box');  
}); 

Answer 2

그냥 작은 상자 처리기에 return false;를 추가합니다. nbrooks도 작품에 대답처럼 stopPropogation를 사용 http://jsfiddle.net/brodenbaugh/BMPYd/

$('#small-box').click(function(){ 
    console.log('red box'); 
    return false; 
});