243 - 阻止事件冒泡

[RanGuMo]

1.方式一：原生阻止冒泡（但是挑战是在vue中,能实现但不是最终答案）

<script setup lang="ts">

const click1 = () => {
  console.log('click1')
}

const click2 = () => {
  console.log('click2')
  event.stopPropagation()
}

</script>

<template>
  <div @click="click1()">
   <div @click="click2()">
     click me
   </div>
  </div>
</template>

2.方式二： stop 修饰符

<script setup lang="ts">

const click1 = () => {
  console.log('click1')
}

const click2 = () => {
  console.log('click2')
}

</script>

<template>
  <div @click="click1()">
   <div @click.stop="click2()">
     click me
   </div>
  </div>
</template>

[shenrui1]

finished