jQuery olaylarının ana öğelere taşınmasını nasıl engellerim?

Question

Böyle olan iç içe UL en bir dizi var:

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

Sonra ben click() farklı Lis için "selected" sınıfını geçmek için amaçlanan bu jQuery vardır:

$(document).ready(function() { 

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

}); 

Bunu test ettiğinde İlk başta hiç işe yaramıyordu. Tıklama etkinliği işlevinin içine bir alert("click") ekledim ve bunun çalıştığını anladım, ancak hem LI hem de ana LI'lar üzerinde kayıtlı tıklama olayı, nihayetinde kök Ll'in her zaman seçildiği gibi sonuçlanması anlamına geliyordu.

click() etkinliğinin ana LIs üzerinde yürütülmesini engellemenin bir yolu var mı?

Answer 1

Kullanım event.stopPropagation(); bağlantı bir örnek sağlar.