[Nuxt] Event Bubbling 막는 방법

📱테스트 환경

"nuxt": "^3.11.2"
"vue": "^3.4.21"
"vue-router": "^4.3.0"

---

<tr v-for="(item, index) in data" :key="index" @click="detail(item.id)">
    <td>
        <input type="checkbox" v-model="item.id"/>
        </td>
        <td>{{ index + 1 }}</td>
        <td class="title">{{ item.title }}</td>
        <td class="regDt">
        {{ item.regDt }}
        </td>
    </td>
</tr>

간략하게 Click 이벤트가 상위에 있고 input checkbox 가 해당 태그 안에 있다.

이럴때 checkbox 를 누르면 checkbox 도 되고 상위 detail 함수도 실행된다.

ㅇㅣ런걸 이벤트 버블링이 발생했다고 하는데 막는 방법은 아주 간단하다.

@click.stop 태그를 사용하는 방법이다.

<tr v-for="(item, index) in data" :key="index" @click="detail(item.id)">
    <td @click.stop>
        <input type="checkbox" v-model="item.id"/>
        </td>
        <td>{{ index + 1 }}</td>
        <td class="title">{{ item.title }}</td>
        <td class="regDt">
        {{ item.regDt }}
        </td>
    </td>
</tr>

input 상위인 td 에 @click.stop 를 넣어주게 되면

input Click 이벤트가 끝나고 stop 을 만나서 detail 함수는 실행하지 않는다.

해당 태그에 바로 @click.stop 이벤트를 넣어줘도 되지만

나는 클릭범위를 생각해서 원하는 곳을 누르려고했는데 잘못 누르는 경우도 있지 않을까

심지어 테이블 구조에서는 ? 싶어서 상위태그에 넣었다.