⛵ 항해99/TIL · WIL ✏️

[TIL] 2023.09.08 - Event.stopPropagation()

hhhhy 2023. 9. 8. 15:06

 Event.stopPropagation() 

  •  현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지
  • 예시
    - div2에 evet.stopPropagation()가 없으면 div2 부분을 클릭했을 때도 onClick={closeModal}이 실행됨
<div1 onClick={closeModal}>
  <div2 onClick={(evet) => evet.stopPropagation()}>
    <button onClick={closeModal}>닫기</button>
    <p>Hello</p>
  </div2>
</div1>

 

 참고 

 

Event.stopPropagation() - Web API | MDN

Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링

developer.mozilla.org