在列表

Question

我在HTML列表的树的树添加一个点击事件列出的项目，如本：

<ul class="myTree"> 
    <li class="treeItem">Category 1 
     <ul> 
      <li class="treeItem">Subcategory 1 1</li> 
      <li class="treeItem">Subcategory 1 2 
       <ul> 
        <li class="plus"><input type="text" value="Add a product"/></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="treeItem">Category 2 
     <ul> 
      <li class="treeItem">Subcategory 1 1</li> 
      <li class="treeItem">Subcategory 1 2 
       <ul> 
        <li class="plus"><input type="text" value="Add a product"/></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

因此，大家可以看到，这是一个有点阐述名单。

现在我需要的是那些会检索相应名称（类别1，子类别11等）的那些“treeItem”类元素上的单击事件。

我想出了这一点：

$(".myTree").on("click", ".treeItem", function() { 
    var categoryName = $(this).text(); 
    alert(categoryName); 
}); 

我面对现在唯一的问题是，首先，categoryName包含

Category 2 

       Subcategory 1 1 
       Subcategory 1 2 

当我点击“等级1” <li>（如类别1）。我可以通过在我的<li>中添加一些catname属性来避开这个问题，但最重要的是，当我点击“2级”<li>（例如子类别11）时，它会首先在级别2上触发点击事件<li>，然后在级别1上触发新的点击事件<li> ...

这很明显，它为什么会这样做，但我需要一种方法来让它只在最高级别出现一次（当我点击“子类别1 1 “，它不应该触发”类别1“的事件）。

还值得注意的是，这棵树会自动生成，这意味着我可以将我的treeItem与其他类如“level1”或类似的东西贴在一起，但如果我能避免这种情况，我会喜欢它。

...好吧，因为我觉得我有点迷失了自己在它这个问题可能需要总结......

1. 我需要在列表树click事件
2. 我需要的单击事件只能在最高级别（最深）被解雇。
3. 添加一些类名是可能的，但希望避免。

谢谢！

Answer 1

首先，您需要使用event.stopPropagation停止冒泡DOM并重复其自身的事件。然后您需要获得li中的第一个文本节点。试试这个：

$(".myTree").on("click", ".treeItem", function(e) { 
    e.stopPropagation(); 
    var categoryName = $(this).contents().filter(function() { 
     return !!$.trim(this.innerHTML||this.data); 
    }).first().text(); 
    alert(categoryName); 
}); 

Example fiddle

Answer 2

您需要在活动上使用event.stopPropagation()。

$(".myTree").on("click", ".treeItem", function(event) { 
    var categoryName = $(this).text(); 
    alert(categoryName); 
    event.stopPropagation() 
});