Question

伙计我遇到点击事件的问题。我正在做的是ul有一些li's，此ul是嵌套列表。我绑定一个单击事件来列出工作正常的项目，但为什么同一个单击事件使用嵌套列表项。如何取消该活动。

＆＃13;

$('.item').on('click',function(e){
  alert('click');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="item"><a href="#">Red</a></li>
  <li class="item"><a href="#">Green</a></li>
  <li class="item"><a href="#">Blue</a></li>
  <li class="item">
    <a href="#">Orange</a>
    <ul>
      <li><a href="#">Yellow</a></li>
      <li><a href="#">Magenta</a></li>
      <li><a href="#">Brown</a></li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

这是因为click事件从元素传播到父元素（甚至更进一步向上传播到document） - btw是你的代码完全工作的唯一原因，因为点击是在锚a上触发，而不是在列表项li.item上触发 - 并传播到列表项。

您可以通过使选择器更具体来解决您的具体问题：

$('.item > a').on('click', function(e) {
  alert('click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="itemlist">
  <li class="item"><a href="#">Red</a></li>
  <li class="item"><a href="#">Green</a></li>
  <li class="item"><a href="#">Blue</a></li>
  <li class="item">
    <a href="#">Orange</a>
    <ul>
      <li><a href="#">Yellow</a></li>
      <li><a href="#">Magenta</a></li>
      <li><a href="#">Brown</a></li>
    </ul>
  </li>
</ul>

为什么事件绑定到嵌套列表项

1 个答案: