Question

我正在尝试从一些JSON数据创建一个可折叠的树。它渲染得很好，如果我不在我的事件处理程序中添加else子句，则显示操作一直在树下工作。实际上，隐藏/显示在树的第一级工作正常，但在第二级，似乎正在执行if和else部分。因此，显示下一级别的孩子，然后立即隐藏。

我有working example here。如果你打开控制台，你会发现点击会同时注册“隐藏”和“显示”调试信息。

为什么点击会同时注册if和else条款？如何在树的所有级别获得正确的隐藏/显示行为？

Answer 1

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

以下是修改后的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()可以阻止事件向外传播。

可折叠树在第二级不显示子树

1 个答案: