¿Cómo evito que los eventos jQuery burbujeen hasta los elementos principales?

Question

tengo una serie de anidada UL de que son como este:

<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> 

entonces tengo jQuery que tenía la intención de mover la clase "selected" a diferentes lis en click():

$(document).ready(function() { 

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

}); 

Cuando probé este , al principio no parecía funcionar en absoluto. Agregué un alert("click") dentro de la función de evento de clic y pude decir que estaba funcionando, pero el evento de clic se registró tanto en LI hijo como en LI padre, lo que significaba que, en última instancia, la LI raíz siempre terminaría como seleccionada.

¿Hay alguna manera de evitar que el evento click() se ejecute en los LI primarios?

Answer 1

Utilice event.stopPropagation(); el enlace proporciona un ejemplo.