在 vue3 中用 event.stopPropagation() 方法阻止冒泡触发事件

在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>