vue3 div有个点击事件 div里有checkbox 点击checkbox 如何不触发点击事件

在 Vue 3 中，如果你想要在点击复选框时不触发绑定在 `<div>` 上的点击事件，你可以通过JavaScript阻止浏览器的默认行为（即阻止`<input type="checkbox">`的默认提交行为），然后取消事件的冒泡。以下是一个简单的示例：

HTML部分：

<div @click="handleDivClick">
  <input type="checkbox" v-model="checked" @change="handleCheckboxChange" />
</div>

Vue实例的script部分：

export default {
  data() {
    return {
      checked: false,
    };
  },
  methods: {
    handleDivClick() {
      // 防止默认行为和阻止事件冒泡
      event.preventDefault(); // 对于原生DOM事件
      event.stopPropagation(); // 避免事件向上级元素传播
    },
    handleCheckboxChange(e) {
      // 处理复选框变化
    },
  },
};

当你在点击复选框时，`handleCheckboxChange` 会执行，而`handleDivClick` 将被阻止。这样就可以达到你的需求了。