为什么需要阻止冒泡？

假设结构是这样包裹的，两层都有点击事件，

    <button @click="handleContinue">继续学习</button> 
   </div>

在点击内层的按钮时，会导致向父元素冒泡外层元素的点击事件同时也被触发，从而可能导致多个 $router.push() 被调用，导致两次路由跳转 → 而第一次被取消，控制台就会报错。

阻止冒泡的正确使用：

1、结构中事件中携带event：

      @click="handleContinue($event)" > 继续学习 </el-button>

2、 阻止冒泡event.stopPropagation()

methods: {
  handleContinue(event) {
    event.stopPropagation(); // 阻止冒泡
    console.log('跳转继续学习 /my-courses');
    this.$router.push('/my-courses');
  },
  bannerClick() {
    this.$router.push('/my-content');
  }
}

这样就能避免因事件冒泡导致的重复导航和控制台警告了。

event.stopPropagation()方法用于阻止事件继续传播‌，适用于需要精确控制事件影响范围的场景，如防止点击一个元素时触发其父元素的特定行为。 event.preventDefault()方法用于阻止事件的默认行为‌，适用于需要自定义处理某些操作的场景，如表单提交、链接导航等。