v-on 이벤트 핸들링 수식어

클릭 이벤트 사용시 여러 겹의 레이어가 겹쳐 있을 때 이를 구분해서 원하는 레이어만 실행하려면 어떻게 해야할까?

이벤트 핸들링에 대한 수식어를 사용하면 된다.

 

위 그림에서 red영역은 child 고  blue영역은 chlid를 감싸는 parent라고 해보자.

<div class="parent">

   <div class="child"> </div>

</div>

 

위와 같은 구조에서 클릭 이벤트 핸들러를 동일한 함수를 사용하면 child 영역을 클릭했을 때 child에 대한 이벤트 핸들링을하고 parent에 대한 이벤트 핸들링도 된다. 그 이유는 클릭한 부분에 해당하는 영역이기 때문이다. 이것을 원하지 않고 child를 클릭하면 child만 반응하게 하려면 어떻게 해야할까? 

아래 코드와 같이 작성하면 된다.