// 버블링은 이벤트가 하위에서 상위로 타고 올라가면서 발생하는 것을 의미한다.
// 자식의 이벤트를 발생 시켰더니 부모까지 발생하는 것.
event.stopPropagation() // 전파를 stop
또는
@click.stop

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

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

<style lang="scss" scoped>
  .parent {
    width: 200px;
    height: 100px;
    background-color: royalblue;
    margin: 10px;
    padding: 10px;
    .child {
      width: 100px;
      height: 100px;
      background-color: orange;
    }
  }
</style>

// 캡쳐링은 부모에서 자식요소로 내려오는 개념이다.
// 자식이 먼저 발생하는 이벤트여도 강제로 부모에서 자식요소로 내려가게 한다.
@click.capture