vue点击子元素不触发父元素

<template>
  <div class="parent" @click="handleParentClick">
    Parent Element
    <div class="child" @click.stop="handleChildClick">
      Child Element
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleParentClick() {
      console.log('Parent clicked');
    },
    handleChildClick() {
      console.log('Child clicked');
    }
  }
};
</script>

<style scoped>
.parent {
  padding: 20px;
  background-color: lightblue;
}

.child {
  padding: 10px;
  background-color: lightcoral;
}
</style>

解释说明：

• 在这个示例中，@click.stop 修饰符用于阻止点击事件冒泡到父元素。因此，当点击子元素时，只会触发子元素的点击事件，而不会触发父元素的点击事件。
• handleParentClick 和 handleChildClick 是两个处理点击事件的方法，分别在父元素和子元素被点击时调用，并输出相应的日志信息。