vue3取消事件

在Vue3中，取消事件可以通过事件对象的preventDefault()方法和stopPropagation()方法来实现。

1. 取消默认行为

在事件处理函数中，可以通过事件对象调用preventDefault()方法来取消默认行为。例如：

<button v-on:click="handleClick">Click me</button>

...

methods: {
  handleClick(event) {
    event.preventDefault(); // 取消按钮的默认行为
    // 处理逻辑
  }
}

2. 阻止事件冒泡

在事件处理函数中，可以通过事件对象调用stopPropagation()方法来阻止事件冒泡。例如：

<div v-on:click="handleClick">
  <button v-on:click="handleClickChild">Click me</button>
</div>

...

methods: {
  handleClick(event) {
    console.log('parent clicked');
  },
  handleClickChild(event) {
    event.stopPropagation(); // 阻止事件冒泡到父元素
    console.log('child clicked');
  }
}

在上面的例子中，当点击按钮时，事件会先触发子元素的点击事件，再触发父元素的点击事件。如果要阻止事件冒泡，可以在子元素的点击事件处理函数中调用stopPropagation()方法，这样就只会触发子元素的点击事件。