본문 바로가기
React

React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)

by 새발개발JA 2022. 1. 3.
반응형

부모 영역에서는 클릭하면 상세 페이지로 들어가는 이벤트가 있고,

자식 영역에서는 클릭하면 다른 상세 페이지로 들어가는 이벤트가 있다.

 

이 때는 부모 영역을 클릭하더라도 자식 이벤트 발생 후 부모 이벤트가 발생한다.

이는 부모 영역이 자식의 영역을 덮고 있어 이벤트 버블링이 발생하여 생긴 이슈이다. 

이를 해결하기 위해서는 이벤트 객체를 받아 중지시키는 stopPropagation() 함수를 사용하면 된다.

 

결과화면 미리보기

 

**이벤트 버블링이란 (더보기클릭)

더보기

자식함수가 부모 내부에 존재하기 때문에 떨어진 물방울이 바깥으로 번지듯이 자식 → 부모 순으로 이벤트가 실행이 된다.

 

 

 


React(55) 겹친 영역에서 자식 이벤트만 발생시키기 (이벤트 버블링)

 

Detail.tsx 

자식태그의 onClick 함수인 goToBill()을 실행하기 전에 stopPropagation() 함수를 실행해주자.

  const goToBill = useCallback((id) => {
      if (!props.bill.id) {
        return;
      }
      history.push(`/bill/${bill.id}`);
    
    },[props.bill.id]
  );

 

<div onClick={() => goToDetail()}>
  <p>상세내용 자세히보기</p>

  <div>비용</div>
  <div
    onClick={e => {
      e.stopPropagation(); // 이벤트방지함수를 먼저 실행하면
      goToBill(bill.id);   // 생각한대로 실행이 된다.
    }}
  >
    영수증 자세히 보기
  </div>
</div>

 

 

 

 

반응형

댓글