在vue 3 中,当父标签及子标签同时存在事件时,例如@click 事件,那么当用户点击的时候,默认会先触发子标签点击事件,然后再冒泡触发父标签点击事件。通常我们在触发子标签的时候,我们不需要触发父标签的事件,那么需要用到 event.stopPropagation()
方法来阻止冒泡触发父标签的事件。这里为什么不使用 event.preventDefault()呢,event.preventDefault()
方法可以阻止事件的默认行为,但是它不会影响事件的冒泡行为。在 Vue 3 中,event.preventDefault()
可以用于阻止链接的默认跳转行为或提交表单等默认操作。例子如下:
<template>
<div @click="handleParentClick">
<span @click="handleChildClick($event)">Click me</span>
</div>
</template>
<script lang="ts" setup>
const handleParentClick = () => {
console.log('parent click')
}
const handleChildClick = (event : MouseEvent) => {
//event.preventDefault();
event.stopPropagation();
console.log('child click')
}
</script>