e.preventDefault()와 e.stopPropagation()

e.preventDefault()와 e.stopPropagation()

a 태그 안에서 menu 버튼을 누르면 menu가 토글되도록 하는 이벤트를 구현하는데, a태그 default event가 계속 발생했다.

preventDefault()를 해주는 @click.prevent를 해주어도 그대로 a태그가 작동해서 redirecting 되었다.

왜? 이벤트가 상위로 전파(버블링) 되어서 상위 이벤트가 일어난 것으로 추정된다.

그래서 상위 엘리먼트 이벤트로의 전파를 막아주는 stopPropagation()을 해주니 토글 이벤트만 정상적으로 작동되었다!

@click.prevent.stop을 해주면 prevent 한뒤 stop을 해준다.

vuetify 내부 slot을 쓰다보니 디버깅이 오래 걸렸다.

• preventDefault() : 태그가 가지고 있는 default 이벤트를 막아준다.

  form submit 태그의 경우 자동으로 input을 전송하고, a 태그는 페이지를 이동시키는데, 이러한 default 이벤트를 막아준다.

• stopPropagation() : 이벤트가 상위 엘리먼트에게 전달되지 않게 막아준다.