Сложное дерево, не отображающее поддеревья на втором уровне

Question

Я пытаюсь сделать сбрасываемое дерево из некоторых данных JSON. Он отлично отображает, и если я не добавляю в предложение else в обработчике событий, действие показывается полностью вниз по дереву. Как бы то ни было, hide/show работает нормально на первом уровне дерева, но на втором уровне кажется, что выполняются как секции if, так и else. Таким образом, отображается следующий уровень детей, затем сразу же скрывается.

У меня есть working example here. Если вы включите консоль, вы увидите, что щелчок регистрирует сообщения отладки «скрывать» и «показывать».

Почему клик регистрирует как статьи if, так и else? Как я могу получить правильное поведение hide/show на всех уровнях дерева?

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() останавливает событие от распространения наружу.