Vue实现点击Div区域排除按钮的独立点击事件

问题根源是浏览器的事件冒泡机制：点击按钮时，点击事件会从按钮向上传递到父级div，导致同时触发method2和method1。以下是两种可行的解决方法：

方法1：使用Vue事件修饰符.stop #

直接在按钮的点击事件上添加.stop修饰符，阻止事件冒泡到父级元素，这是Vue中最简洁的处理方式：

<div class="full-width" @click="method1">
  <button @click.stop="method2">click me</button>
</div>
<script>
export default {
  methods: {
    method1() {
      console.log("div is clicked")
    },
    method2() {
      console.log("button is clicked")
    }
  }
}
</script>

方法2：手动阻止事件冒泡 #

在method2方法中，通过事件对象调用stopPropagation()方法，阻止事件向上传递：

<div class="full-width" @click="method1">
  <button @click="method2">click me</button>
</div>
<script>
export default {
  methods: {
    method1() {
      console.log("div is clicked")
    },
    method2(event) {
      // 阻止事件冒泡
      event.stopPropagation()
      console.log("button is clicked")
    }
  }
}
</script>

注意：你提供的原始代码中存在标签闭合错误，<button>标签误写为用</div>闭合，已在上述示例中修正为</button>。

内容的提问来源于stack exchange，提问作者power-cut