jQuery单击带有嵌套ul的li答案

【问题标题】：jQuery click on li with nested uljQuery单击带有嵌套ul的li
【发布时间】：2010-07-27 17:43:26
【问题描述】：

我在列表中有一个列表。当用户单击列表项 (<li>) 时，我希望显示嵌套的 <ul>。在我开始添加嵌套列表之前，我只是在单击列表项将运行一个函数的地方。现在，单击任何嵌套列表也会运行该功能。这是有道理的，因为它们是列表项的一部分。

除了将<span> 包裹在列表项的第一部分并在其上运行函数之外，是否有一个选择器可以让我在父级<li> 上运行某些东西，但不能在其任何子级上运行，特别是不是子列表和列表项？

HTML：

<ul class="buckets">        
    <li class="bucket">
        <img src="arrow_group_collapsed_true.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        View all
    </li>

    <li class="bucket">
        <img src="arrow_group_collapsed_false.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        Groups
        <ul style="display: block;">
            <li id="group_id_15036" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 1
            </li>
            <li id="group_id_14910" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 2
            </li>
        </ul>
    </li>
</ul>

Javascript（不多，如果需要我可以展示更多）：

$( 'li.bucket' ).live( 'click',
    function()
    {
        // do stuff
    })

我想点击“Groups”或“View All”来运行点击功能，但点击“Group 1”或“Group 2”不应该。

【问题讨论】：

标签： jquery jquery-selectors jquery-click-event

【解决方案1】：

有一个官方的方式，但在你的情况下，它可能相当昂贵：

$('li.bucket *').live('click', function(event) { event.stopPropagation() });

li 的子级现在将有一个处理程序来阻止事件向上传播并触发li 的处理程序。请尝试一下，看看应用程序的速度是不是太慢了。

【讨论】：

那么如果用户点击li.bucket li之类的东西，这里会发生什么？
什么都没有。这不是预期的行为吗？
是的，我只是想确定一下。然后我可以覆盖它吗？我确实希望在单击更深的链接时发生一些事情，我只是不希望该功能也在顶部触发。如果这是有道理的。
本质上，我希望click函数在所有li上运行，但我希望它在实际点击的li上运行，而不是父li。
是的，您可以覆盖（实际上，补充）它并且它会起作用。此代码完成的唯一一件事是不会触发父母的click 处理程序。听起来这正是你想要的。

【解决方案2】：

你可以控制上面的函数onmouseover列表项并移除它的onmouseout事件。但我不知道它与其他方式相比效率如何。

【讨论】：

呵呵，其实这些想法是在我懒得写 jQuery 代码的时候出现的……很容易帮助人们，只需给他们想法而不是代码：p

【解决方案3】：

我喜欢@MvanGeest 的解决方案，但是通过了解事件传播有更好的方法。当一个元素被点击时，包含的元素首先获得事件并通过树涓涓细流。如果我理解您的请求，您希望阻止包含的 ul 将事件发送到树上。我认为这里的视觉效果最好。

<ul>
  <li></li>
  <li onclick="ShowChildUL()">
    <ul onclick="function(event) { event.stopPropagation() }">
      <li onclick="DoSomethingFun()"></li>
      <li></li>
      </ul>
  </li>
</ul>

在这种情况下，您将看到中间 ul 上的 onclick 将停止传播到 li。 event.stopPropagation() 也不是跨浏览器。我推荐这种方法作为你的 onclick 函数。

function StopPropagation(e) {
  var event = e || window.event;

  [body of event handler function goes here]

  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
}

【讨论】：