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 列表项＆amp;删除项目的 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;
  } 
}

jQuery点击li与嵌套ul

3 个答案: