onClick 우선순위 설정, 컨트롤 (e.stopPropagation,e.preventDefault)

아래와 같은 경우

<li onClick={()=>{페이지이동함수()}}>
  <h2>제목</h2>
 <a onClick={()=>{태그이동함수()}}>태그</a> 
 </li>

이런 경우 태그이동을 하려해도 당연히 상위에 onClick 이벤트 때문에 페이지 이동 함수가 실행되었다. 이를 해결하기 위해 찾은 것이 e.stopPropagation(), e.preventDefault()를 사용했다.

<li onClick={()=>{페이지이동함수()}}>
  <h2>제목</h2>
 <a onClick={(e)=>{
   e.stopPropagation()
   태그이동함수()}}>태그</a> 
 </li>

e.preventDefault()와 e.stopPropagation()의 차이

두개의 코드 모두 이벤트 관련 동작에서 많이 사용되는 코드이다. 둘의 차이점은 무엇일까 알아보자.

e.preventDefault()

html 에서 a 태그나 submit 태그는 고유의 동작이 있다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송한다던가 그러한 동작이 있는데 e.preventDefault 는 그 동작을 중단시킨다.

해당 a 태그를 클릭했을 경우 블로그로 이동하는 것을 확인할 수 있다.
이 코드에 e.preventDefault 를 넣으면
a 태그의 href 속성이 중단되고 e.preventDefault()를 띄우는 것을 알 수 있다.

e.stopPropagation()

이 코드를 보면 단지 .last-el 만 클릭했을 뿐인데 부모 엘리먼트에게도 이벤트가 전파 됨을 알 수 있다. 이때 사용하는 것이 e.stopPropagation 이다. e.stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않게 막아 준다.

두번째 줄에 e.stopPropagation(); 를 추가시킨것 만으로 이벤트를 중단 시킬수 있다.

정리

e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.