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”类元素上的click事件，它将检索相应的名称（Category 1，Subcategory 11等）。

我想出了这个：

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

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

Category 2

                Subcategory 1 1
                Subcategory 1 2

当我点击“等级1”<li>（例如类别1）时。我可以通过向catname添加一些<li>属性来绕过这一点，但最重要的是，当我点击“级别2”<li>（例如子类别1 1）时，它首先触发第2级<li>上的点击事件，执行这些操作，然后在第1级<li>点击新的点击事件...

为什么它会这样做很明显，但是我需要一种解决办法让它只在最高级别发生一次（当我点击“子类别1 1”时，它不应该在“类别1”上触发事件）

同样值得注意的是，这棵树会自动生成，这意味着我可以用其他类别标记我的treeItem，例如“level1”或类似的东西，但如果我可以避免，我我爱它。

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

我需要列表树上的点击事件
我需要点击事件才能在最高级别（最深处）触发。
可以添加一些类名，但希望避免使用。

谢谢！

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()
});

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

2 个答案: