Jquery只触发主类或其中的子类

Question

我有一个看起来像这样的列表

 <li class="myList" id="01">01 - Animals; live

  <ul class="sub">
    <li class="myList2" id="0101">0101 - Horses </li>
    <li class="myList2" id="0102">0102 - Bovine animals</li>
  </ul>

 </li>

当我触发单击偶数 myList2 时，myList首先触发，因此事件会触发两次。

如果用户单击myList和MyList2，如果用户单击MyList2 li，我只需要触发MyList。

我试过.one而不是.on它工作但我无法再次触发点击事件。

Answer 1

您必须使用e.stopPropagation();，以便父级的事件不会在子级上执行。

示例：

$(document).ready(function() {
  $(".myList").click(function() {
    alert("alert myList");
  });

  $(".myList2").click(function(e) {
    e.stopPropagation(); /* Add this on Child event */
    alert("alert myList2");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li class="myList" id="01">01 - Animals; live
  <ul class="sub">
    <li class="myList2" id="0101">0101 - Horses </li>
    <li class="myList2" id="0102">0102 - Bovine animals</li>
  </ul>
</li>