jquery - 仅对 ul 中的第一级 li 元素执行特定操作？

Question

jQuery('ul.nav.lvl1>li').on("click", function() {
  alert('hello');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav lvl1">
  <li><a href="#">Link</a>
  </li>
  <li><a href="#">Link</a>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>

我们遇到了问题，因为此操作适用于所有 ul 中的所有 li，但我们希望仅对 li 第一级使用操作ul。

如何解决问题？

Answer 1

您可以简单地检查最近的祖先 li 元素是否是事件监听器附加到的元素，而不是停止事件传播(这可能会影响并抑制附加的所有其他事件监听器) .

在下面的示例中，event.target 指的是被单击的元素，而 event.currentTarget 指的是事件监听器附加到的元素。

通过使用.closest()方法，您可以确定event.target是否是事件监听器最初附加到的元素:

$('ul.nav.lvl1 > li').on('click', function(event) {
  if ($(event.target).closest('li').is(event.currentTarget)) {
    alert('Clicked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav lvl1">
  <li><a href="#">Link</a>
  </li>
  <li><a href="#">Link</a>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
  <li><a href="#">Link</a></li>
</ul>