[부모태그로 이벤트 전파 중지 | 활용] event.stopPropagation() - 차트(tree구조)

[ download before / after HTML file ]

after-tree.html

before-tree.html

---

현재 업로드한 파일은

우리가 흔히 볼 수 있는 트리구조의 차트이다.

부서/그룹을 선택하고 그에 속해있는 팀들을 확인하고 싶을 때

사용할 수 있는 파일인데

이 곳에  event.stopPropagation()을 적용시켜보았다.

결과>>

before : checkbox를 클릭하면 닫혀있던 구조가 열리기도 하고, 닫히기도 하면서 부모요소인 .item에 영향을 끼친다

after : checkbox를 클릭하면 구조가 닫혀있던 열려있던 상관없이 check를 넣었다뺐다 할 수 있다.

---

[before]

자식요소 checkbox를 클릭할때마다 부모요소 .item에 영향을 끼친다.

See the Pen RMmpJN by seobin (@lullu-lalla) on CodePen.

[after]

event.stopPropagation()을 자식요소 checkbox에 적용시켜, 자식요소의 이벤트가 부모요소 .item에 영향을 끼치지않도록(버블링되지않도록)한 상태

See the Pen rdgyQZ by seobin (@lullu-lalla) on CodePen.