vue阻止冒泡和阻止默认行为

<template>
  <div>
    <!-- 阻止冒泡 -->
    <button @click.stop="handleClick">阻止冒泡</button>

    <!-- 阻止默认行为 -->
    <a href="https://example.com" @click.prevent="handleLinkClick">阻止默认行为</a>

    <!-- 同时阻止冒泡和默认行为 -->
    <a href="https://example.com" @click.stop.prevent="handleLinkClick">同时阻止冒泡和默认行为</a>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('按钮被点击了，但不会触发父级元素的事件');
    },
    handleLinkClick() {
      console.log('链接被点击了，但不会跳转到新页面');
    }
  }
};
</script>

解释说明：

1. 阻止冒泡：使用 .stop 修饰符可以阻止事件冒泡。例如，点击按钮时，事件不会传播到父级元素。
2. 阻止默认行为：使用 .prevent 修饰符可以阻止元素的默认行为。例如，点击链接时，浏览器不会跳转到指定的 URL。
3. 同时阻止冒泡和默认行为：可以将 .stop 和 .prevent 一起使用，以同时阻止事件冒泡和默认行为。