부모 요소가 아닌 자식 요소에 클래스 추가

Question

한 번에 하나의 요소에 클래스를 추가하고 싶습니다. 요소는 click 이벤트가 적용되는 부모 요소의 자식 일 수 있습니다. 자식 요소에만 클래스를 추가하는 가장 좋은 방법은 무엇이 겠지만 부모는 아닙니다. 예를 들어, 자식 div를 클릭하고 클래스가 모든 부모 요소에도 추가되는지 확인하십시오. 이 작업을 수행하는 몇 가지 방법을 생각할 수 있지만 최선의 솔루션을 사용하여 Im을 확인하려고합니다. 기본적으로 클래스는 같은 클래스의 부모와 관계없이 클릭 된 요소에만 추가되기를 원합니다.

<div id="parent" class="element"> 
    <div id="child" class="element"> 
    <div id="childdd" class="element"></div> 
    </div> 
</div> 

Answer 1

http://codepen.io/anon/pen/aiGJb

나는 당신의 문제는 "버블 링"에서라고 생각합니다.
이 "거품"마법이 어떻게 작동하는지에 대한 훌륭한 설명이 있습니다.
은 "버블 링 및 캡처"기사 : http://javascript.info/tutorial/bubbling-and-capturing

귀하의 솔루션이 클릭 핸들러의 끝에서 return false;를 사용하여 "버블 링"중지하는 것입니다 : 사용 "버블 링"

$(".element").on("click", function() { 
    $(this).addClass("active"); 
    return false; 
});