Question

tôi có một loạt các lồng UL rằng là như thế này:

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

sau đó tôi sẽ sử dụng jQuery mà tôi dự định để di chuyển các lớp "selected" để LIS khác nhau trên click():

$(document).ready(function() { 

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

}); 

Khi tôi thử nghiệm này , lúc đầu nó dường như không hoạt động chút nào. Tôi đã thêm một hàm alert("click") bên trong hàm sự kiện nhấp và tôi có thể biết rằng nó đang hoạt động, nhưng sự kiện nhấp đã đăng ký trên cả LI và LI của cha mẹ có nghĩa là cuối cùng LI gốc sẽ luôn kết thúc như được chọn.

Có cách nào để ngăn sự kiện click() thực thi trên LIS chính không?

Answer 1

Sử dụng event.stopPropagation(); liên kết cung cấp một ví dụ.