添加单击事件以列出列表树中的项目

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>

如您所见，这是一个详细的列表。

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

我想出了这个：

$(".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>（例如子类别 1 1）时，它首先会触发级别 2 上的单击事件<li>，做完这些，然后在级别 1 上触发一个新的点击事件 <li>...

这样做的原因很明显，但我需要一种方法让它只在最高级别发生一次（当我点击“子类别 1 1”时，它不应该在“类别 1”上触发事件） .

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

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

1. 我需要一个列表树上的点击事件
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()
});