jQuery点击li与嵌套ul

Question

我在列表中有一个列表。 当用户单击列表项（ <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
    })

我想点击“群组”或“查看全部”来运行点击功能，但点击“群组1”或“群组2”不应该。

Answer 1

这是一种官方方式，但在您的情况下，它可能相当昂贵：

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

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

Answer 2

你可以控制上述功能的onmouseover列表项和删除的onmouseout项目的事件。 但我不知道它对其他方式的效率如何。

Answer 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;
  } 
}