[REACT] e.stopPropagation( )

우리가 마우스로 어떠한 태그(div, ul, li, a 등)를 클릭했을 경우 많은 분들이 해당 태그만 클릭이 되었다고 생각하는 경우가 많다. 하지만 해당 태그만이 클릭 이벤트를 감지하는 것이 아니라 태그를 감싸고 있는 부모 태그들도 클릭 이벤트를 인식하고 반응하게 된다. 이것을 버블업(Bubble Up) 또는 버블링(Bubbling)이라고 한다.

 

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

 

 

이러한 버블링 또는 버블업을 막는 것이 stopPropagation이라고 보면 된다. 상위요소로 해당 이벤트를 전달하지 않고 자신만 이벤트를 감지하도록 사용하는 것이 stopPropagation 이다.

 

 

 

( Result 클릭 ✅) 이 코드를 보면 단지 .last-el 만 클릭했을 뿐인데 부모 엘리먼트에게도 이벤트가 전파 됨을 알 수 있다. 이때 사용하는 것이 e.stopPropagation 이다. e.stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.

 

 

두번째 줄에 e.stopPropagation(); 를 추가시킨것 만으로 이벤트를 중단 시킬수 있다.

 

 

❤️ 도움주신분 :

https://pa-pico.tistory.com/20