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>

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

如何解决问题？

Answer 1

您可以简单地检查最近的祖先li元素是否是事件侦听器附加到的元素，而不是停止事件传播（可能影响和抑制所有其他附加的事件侦听器）。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要使用 stop propagation 作为内部li元素。否则，内部元素的点击将传播到父元素。

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

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

Answer 3

这是因为你使用的选择器......

当您使用ul>li这样的选择器时，您将仅定位作为ul的直接子项的li，因此它不会触发您所属的子项的li。

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

3 个答案: