[Javascript/React] 이벤트 버블링 제거하기 / 해당 영역 클릭시 이벤트 방지 / Event Bubbling

 

1. 이벤트 버블링(Event Bubbling)이란?

계층형 구조의 이벤트를 가진 부모 선택자 선택 시 → 자식 선택자에게 영향

2. 이벤트 버블링을 방지해야하는 경우

modal(popup)창 만들 때 dim 처리 된 바깥 부분을 눌렀을 때도 modal이 꺼지도록 기능을 만들 경우 등

겹치는 영역의 요소에는 이벤트가 발생하지 않도록 할 때

 

3. 이벤트 버블링 막는 방법

<div 
 className="dim" 
 onClick={() => {
  setOpen(!open);
 }
>
 <div 
  className="modal" 
  onClick={(e) => {
   // e.stopPropagation();으로 이벤트 막기
   e.stopPropagation();
  }}
 >
  <div 
   className="button--close" 
   onClick={() => {
    setOpen(!open);
   }
  />
 </div>
</div>