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
'⛵ 항해99 > TIL · WIL ✏️' 카테고리의 다른 글
[WIL] 09.04 ~ 09.10 (0) | 2023.09.10 |
---|---|
[TIL] 2023.09.09 - Redux Toolkit (0) | 2023.09.09 |
[TIL] 2023.09.07 - overflow: hidden 부분 적용 방법(position: fixed) (0) | 2023.09.07 |
[TIL] 2023.09.06 - & (0) | 2023.09.06 |
[TIL] 2023.09.05 - 리액트 아이콘(react-icons) 사용하기 (0) | 2023.09.05 |