同时使用Mousedown和TouchStart更改按钮内容类，反之亦然

Question

我有一个包含子组件的按钮，该按钮由一个由Div制成的圆圈组成。当用户用鼠标单击或触摸屏幕时，我希望圆圈更改颜色。我尝试了 this 有点不错，但是有些不对劲，因为只有touchstart事件并没有导致类改变。

我尝试在父母和子女中记录flag的值，甚至手动检查元素以查看类是否更改。奇怪的是，记录到控制台的值是正确的。当我触摸按钮时，flag是TRUE，color.value是green，但在检查时（通过按F12），Child DOM中的组件类是RED。

我尝试使用由SVG构建的不同的儿童组件，并且发生了同样的事情。问题必须与事件有关。我在某个地方了解到，touchstart/touchend事件将首先触发，然后是mousedown/mouseup然后单击。因此，我正在考虑仅响应Mousedown/MouseUp，同样的问题正在发生。

我还尝试评论//建议的解决方案，均适用于Mousedown和TouchStart，但是对于触摸start，颜色更改和按钮反应（本机按钮按动画）之间存在

延迟我发生了什么事？以及如何使按钮在触摸并单击时对其进行反应和更改其内容样式？

感谢任何评论或帮助。非常感谢。

我的按钮组件

<template>
<button class="slot-header slot-header-btn"
   ref="btn"
   @mousedown="cb"
   @mouseup="cbEnd"
>
        <Child :flag="pressed"/>
</button>
</template>

<script>
import { ref } from "vue"
import Child from './assets/Child.vue'

const pressed = ref<boolean>(false)

function cb(event: any) {
  // Suggested solution
  console.log("Mouse down")
  if(event.handled === false) return
  event.stopPropagation()
  event.preventDefault()
  event.handled = true

  // My own logic
  pressed.value = true
}
function cbEnd(event: any) {
  // Suggested solution
  console.log("Mouse up")
  if(event.handled === false) return
  event.stopPropagation()
  event.preventDefault()
  event.handled = true

  // My own logic
  pressed.value = false
}
</script>

我的孩子组件

<template>
  <div :class="`circle ${color}`">

  </div>
</template>

<script setup lang="ts">
import { computed, PropType, toRefs, watch } from 'vue';


const props = defineProps({
  flag: {
    type: Boolean as PropType<boolean>,
    required: false,
    default: () => false
  }
})


const { flag } = toRefs(props)

const color = computed<string>(() => flag.value ? "green" : "red")

watch(() => flag.value, (newValue, oldValue) => {
  console.log(`Child color.value: ${color.value}`)
  console.log(`Child flag.value: ${newValue}`)
})

</script>

<style scoped>
.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.red {
  background-color: red;
}

.green {
  background-color: greenyellow;
}
</style>