중첩된 div에서 마우스 클릭 이벤트 전달 방지.

div가 중첩되어 있을 때 마우스 클릭 이벤트를 전달하고 싶지 않을 때가 있습니다.

 

 

그림과 같이 BODY, Bottom, Top이 중첩된 구조에서 Top이 팝업 메뉴라 가정하고,

Bottom이나 BODY 부분에 마우스 클릭 이벤트 핸들러를 추가해서 Top을 닫는 코드를 넣었다고 가정해 보겠습니다.

 

코드를 작성 후 실행하면, 의도와 다르게 Top 부분을 클릭해도 Top이 닫혀버립니다.

이유는 Top을 클릭하면 그 이벤트가 Bottom, BODY로 전달되기 때문입니다.

 

이럴때 사용할 수 있는 것이 stopPropagation입니다.

 

 

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

Event.stopPropagation() - Web APIs | MDN

 

Top의 마우스 클릭 이벤트 핸들러에서 stopPropagation을 호출하면 Bottom과 BODY로

마우스 클릭 이벤트가 전달되지 않습니다.

 

codepen에서 보기

 

document.getElementById("top").addEventListener("click", (event) => {
  console.log("top");
  event.stopPropagation();
})