[Vue.js] Vue 클릭 이벤트 전파 중지하기

<template>
  <div>
    <!-- 예제 1: 버튼을 클릭하면 doThis 메서드가 호출되고, 클릭 이벤트 전파가 중지됩니다. -->
    <button @click.stop="doThis">예제 1 실행</button>

    <!-- 예제 2: div를 클릭하면 doThat 메서드가 호출되고, 클릭 이벤트 전파가 중지됩니다. -->
    <div @click.stop="doThat">예제 2 실행</div>

    <!-- 예제 3: span을 클릭하면 doSomething 메서드가 호출되고, 클릭 이벤트 전파가 중지됩니다. -->
    <span @click.stop="doSomething">예제 3 실행</span>
  </div>
</template>

<script>
export default {
  methods: {
    doThis() {
      console.log('doThis 메서드가 호출됨');
    },
    doThat() {
      console.log('doThat 메서드가 호출됨');
    },
    doSomething() {
      console.log('doSomething 메서드가 호출됨');
    },
  },
};
</script>

Vue에서는 이벤트 핸들러에 .stop 수식어를 사용하여 클릭 이벤트의 전파를 중지할 수 있습니다. 이를 통해 특정 요소에서의 이벤트 처리만을 원할 때 사용합니다.

1. 예제 1: 버튼을 클릭하면 doThis 메서드가 호출되고, 클릭 이벤트의 전파가 중지됩니다. 이를 통해 부모 요소로 이벤트가 전파되지 않고, 해당 버튼만의 동작을 수행할 수 있습니다.

2. 예제 2: div를 클릭하면 doThat 메서드가 호출되고, 클릭 이벤트의 전파가 중지됩니다. 이로 인해 부모 요소로의 이벤트 전파가 차단되어 부모 요소의 클릭 이벤트를 방해하지 않습니다.

3. 예제 3: span을 클릭하면 doSomething 메서드가 호출되고, 클릭 이벤트의 전파가 중지됩니다. 이를 통해 특정 요소에서의 이벤트 처리만을 원할 때 사용할 수 있습니다.

클릭 이벤트의 전파를 중지함으로써 부모 요소로의 이벤트 전파를 막고, 해당 요소에서의 독립적인 동작을 구현할 수 있습니다. 이를 통해 Vue 애플리케이션의 이벤트 처리를 더욱 유연하게 제어할 수 있습니다.