点击子元素只触发子元素事件，不触发父元素点击事件

Question

问题：点击子元素只触发子元素事件，不触发父元素点击事件
解决方案：在子元素上添加阻止事件冒泡方法(.stop修饰符可以阻止事件冒泡)
示例代码：

<template>  
  <div @click="outerClick">  
    <div @click.stop="innerClick">  
      Inner Div  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    innerClick() {  
      console.log("Inner div clicked");  
    },  
    outerClick() {  
      console.log("Outer div clicked");  
    }  
  }  
};  
</script>

Answer 1

【以下回答由 GPT 生成】

在Vue.js中，使用修饰符.stop可以阻止事件冒泡，但是这只针对普通的原生事件有效，对于自定义事件是无效的。因此，在上述示例代码中，点击子元素仍然会触发父元素的点击事件。

解决这个问题的方法是，在子元素的点击事件中手动停止事件传播。可以使用event.stopPropagation()方法来停止事件的继续传播，即阻止从子元素向父元素的事件传播。

以下是修改后的代码示例：

<template>
  <div @click="outerClick">
    <div @click="innerClick">
      Inner Div
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    innerClick(event) {
      event.stopPropagation(); // 停止事件传播
      console.log("Inner div clicked");
    },
    outerClick() {
      console.log("Outer div clicked");
    }
  }
};
</script>

通过在子元素的点击事件中调用event.stopPropagation()方法，可以阻止事件继续向父元素传播，从而实现只触发子元素的点击事件，不触发父元素的点击事件。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/175871
• 你也可以参考下这篇文章：父元素添加点击事件找到子元素
• 您还可以看一下 吴雪峰老师的巧用微信业余创业课程中的 创业成功案例分享，创业注意事项小节, 巩固相关知识点
  
• 除此之外, 这篇博客: 微信小程序阻止事件冒泡【看这里】中的 微信小程序阻止事件冒泡 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^