jQuery 이벤트가 상위 요소로 버블 링되지 않도록하려면 어떻게해야합니까?

Question

나는이처럼 중첩 된 UL의 일련 있습니다

<ul class="categorySelect" id=""> 
    <li class="selected">Root<span class='catID'>1</span> 
    <ul class="" id=""> 
     <li>First Cat<span class='catID'>2</span> 
     <ul class="" id=""> 
      <li>cat in First<span class='catID'>3</span> 
      <ul class="" id=""> 
      </ul> 
      </li> 
      <li>another cat in first<span class='catID'>4</span> 
      <ul class="" id=""> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li>cat in root<span class='catID'>5</span> 
     <ul class="" id=""> 
     </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

그때 내가 click()에 다른 LI들에 "selected" 클래스를 이동하도록하는 jQuery를 가지고 :

$(document).ready(function() { 

    $("ul.categorySelect li").click(function() { 
     $("ul.categorySelect li.selected").removeClass("selected"); 
     $(this).addClass("selected"); 
    }) 

}); 

내가 이것을 시험 할 때 , 처음에는 전혀 작동하지 않는 것처럼 보였습니다. 클릭 이벤트 함수 안에 alert("click")을 추가했는데 작동하고 있다고 말할 수 있었지만 자식 LI와 부모 LI에 등록 된 클릭 이벤트는 결국 루트 LI가 항상 선택한 것으로 끝날 것임을 의미했습니다.

부모 LI에서 click() 이벤트가 실행되지 않도록 할 방법이 있습니까?

Answer 1

event.stopPropagation(); 링크는 예제를 제공합니다.