[JQuery] Parent(부모), ChildI(자식) 이벤트 문제

$(document).on('click','.test',function(){ 
    alert('test'); 
});  

$(document).on('click','.test2',function(){ 
    alert('test2'); 
}); 

본인은 div test class를 클릭하면 test가 alert창에 띄워지고 div test2 class 를 클릭하면 test2가 alert에 띄워질줄알았지만, javascript는 부모 자식간에 이벤트를 전파(버블링)하는 속성이 있기때문에 부모 class인 test 의 자식클래스 test2를 클릭해도 alert에 test가 띄워지게 된다. 

 

 

그래서 해결방법으로는 부모의 이벤트전파를 막는 속성인 문구를 하나 추가해주면된다.

//jQuery 사용할경우 
$(document).on('click','element class or id' ,function(e) { 	   
    e.stopPropagation(); 
}); 

//javascript 사용할경우 
function test(test1) {
    event.stopPropagation(); 
}