3

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

除了将 a 包裹<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”不应该。

4

3 回答 3

11

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

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

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

于 2010-07-27T17:46:22.090 回答
2

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

于 2010-07-27T17:53:11.253 回答
1

I like @MvanGeest's solution but there is a better way by understanding the event propagation. When an element is clicked the contained elements get the event first and trickle up through the tree. If I understand your request you would like to prevent the contained ul sending events up the tree. I think here a visual is best.

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

In this case you will see that the onclick on the ul in the middle will stop propagation up to the li. Also event.stopPropagation() is not cross browser. I recommend this method as your onclick function.

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

  [body of event handler function goes here]

  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
}
于 2010-07-27T18:38:07.153 回答