javascript - 可折叠树不显示二级子树

Question

我正在尝试从一些 JSON 数据制作一棵可折叠的树。它呈现良好，如果我不在我的事件处理程序中添加 else 子句，则显示操作会一直沿树向下运行。实际上，隐藏/显示在树的第一层工作正常，但在第二层似乎 if 和 else 部分都在执行。因此，显示下一级的 child ，然后立即隐藏。

我有一个 working example here .如果您打开控制台，您会看到单击会注册“隐藏”和“显示”调试消息。

为什么点击会同时注册 if 和 else 子句？我怎样才能在树的所有级别获得正确的隐藏/显示行为？

Answer 1

在处理完 click 事件后，您需要阻止 event 进一步传播。

这是修改后的 addHandlers 函数:

function addHandlers(elems) {
    for (i = 0; i < elems.length; i++) {
        elems[i].addEventListener('click', function(e) {
            var child = e.target.children[0];
            if (child) {
                if (child.classList.value == 'hide') {
                    console.log('Showing child list!');
                    setDisplay(false, child);
                } else {
                    console.log('Hiding child list!');
                    setDisplay(true, child);
                }
            }
            event.stopPropagation(); // <--- here we call this function to stop the event from bubbling outwards
        });
    }
};

---

发生的事情是由于 event bubbling事件从发出它的目标元素向外传播。因此它会触发所有处理程序向外移动。因此，在您的情况下，它实际上显示然后隐藏子树。

调用 event.stopPropagation()阻止事件向外传播。