如何防止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"类移动到不同的LI click():

$(document).ready(function () {

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

});

当我测试它时,起初它似乎根本没有工作.我alert("click")在click事件函数中添加了一个,我能够告诉它它正在工作,但是在子LI和父LI上都注册了click事件,这意味着最终根LI总是最终被选中.

有没有办法阻止click()事件在父LI上执行？

Answer 1

使用event.stopPropagation(); 该链接提供了一个例子.