如何防止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> 

然後我有jQuery的，我打算移動"selected"類不同的LIS上click()：

$(document).ready(function() { 

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

}); 

當我測試了這，起初它似乎根本沒有工作。我在click事件函數中添加了一個alert("click")，並且我能夠確定它正在工作，但是在子LI和父LIs上註冊的click事件最終意味着根LI將始終以選定的方式結束。

有沒有辦法來防止父母LIs上執行click()事件？

Answer 1

使用event.stopPropagation();該鏈接提供了一個例子。