이벤트 버블링 막기 - stopPropagation

 

 

 

구현중, 문제가 발생했다.

나는 카드를 눌렀을때 상세페이지로 전환되는 작업을 완료 하였는데, 이전에 추가버튼을 클릭하면 나만의 포켓몬으로 추가되는 기능이 구현이 되어이있었는데, 상세페이지 전환 작업 이후 추가버튼 기능을 눌러도 추가가 되지 않고 상세페이지로 전환이 되었다.

 

콘솔을 찍어봤더니 추가하기 버튼도 실행되고, 페이지 이동기능도 실행된다.

 

왜그럴까?

 

구조를 살펴보자

• 카드클릭하였을때 이벤트 : 부모 구조 (PokemonCardLi)
• 추가버튼 클릭하였을때 이벤트 : 자식구조 (button)

하위요소에서 발생한 이벤트가 상위요소로 전파되었다..

이러한 현상을 이벤트 버블링이라고 한다.

 

이벤트 버블링?

이벤트가 특정 요소에서 발생하였을대 그 이벤트는 해당 요소에서 시작해서 그요소의 부모, 조상요소, ...> 최상위요소까지 전파되는 현상을 말한다.

버블링을 막으려면 ? 

.stopPropagation(); 함수를 사용해주면 되는데,

 

번식을 멈추라는 말이다. 

즉, 이벤트가 상위요소로 전파되는걸 막아준다.

 

onClick함수에서 이벤트를 받아와서 stopPropagation() 함수를 적용해주면 된다.

 

 

https://developer.mozilla.org/ko/docs/Web/API/Event/stopPropagation

Event.stopPropagation() - Web API | MDN