// target 과 currentTarget 이 같은 경우에만 동작한다.
// target 은 실제로 클릭한 곳
// currentTarget 은 currentTarget 이 실행된 함수(handler)가 연결이 되어져 있는
// event(@click) 에 해당하는 요소이다(분홍칠 된 부분). 아래에서 parent
// 간단하게 말해서 정말 자기 자신의 영역만 클릭했을 때 동작한다.
@click.self

<template>
  <div
    class="parent"
    @click="handlerA">
    <div
      class="child">
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handlerA(e) {
      console.log(e.target)
      console.log(e.currentTarget)
      console.log('A')
    },
    handlerB() {
      console.log('B')
    },
  }
}
</script>