자식이 부모에 영향을 미치지 않게하는 방법

Question

자식 요소가 PARENT 요소에 영향을 미치지 않도록하려면 어떻게해야합니까?

jQuery를 :

$("#parent").click(function() { 
    alert('parent clicked'); 
}); 
$("#child").click(function() { 
    alert('child clicked'); 
}); 

HTML : 당신이 아이를 클릭하면

<div id="parent"> 
    click me - parent 
    <div id="child">click me - child</div> 
</div> 

, 부모도 활성화되고 우리가이 경고를 가지고있다.

그렇다면 자녀가 부모에게 영향을주지 못하게하려면 어떻게해야합니까?

Answer 1

event.stopPropagation()

$("#child").click(function(event) { 

    event.stopPropagation(); 

    alert('child clicked'); 
}); 

DOM 트리를 버블 링에서 이벤트를 중지 event.stopPropagation()를 호출.

Answer 2

event bubbling 또는 event propagation이라고합니다. 이것은 코드에 e.stopPropagation()을 추가하여 방지 할 수 있습니다. 기본 동작을 중지하려면 다음을 수행하십시오. return false;.

return false;은 기본적으로 e.stopPropagation() 및 e.preventDefault() 모두를 수행합니다. 예를 들어 <a> 태그를 사용하는 경우 유용 할 수 있으며 클릭 후 페이지 탐색을 막고 싶을 수 있습니다.