vue2调用了event.stopPropagation()方法,阻止了事件冒泡到父元素的事件处理函数报错event 没有被定义
时间: 2024-03-09 09:50:10 浏览: 133
在Vue2中,如果你想要在事件处理函数中阻止事件冒泡,可以使用`event.stopPropagation()`方法,但是需要注意的是,你需要在调用该方法时将`event`作为参数传入。如果在调用`event.stopPropagation()`方法时,没有将`event`作为参数传入,就会报错说`event`未定义。
因此,你需要将`event`作为参数传入,在阻止事件冒泡时才不会报错。例如:
```html
<template>
<div class="parent" @click="handleParentClick">
<div class="child" @click="handleChildClick"></div>
</div>
</template>
<script>
export default {
methods: {
handleParentClick(event) {
console.log('parent clicked');
},
handleChildClick(event) {
console.log('child clicked');
event.stopPropagation(); // 阻止事件冒泡
}
}
}
</script>
```
在这个例子中,我们在父元素和子元素上分别绑定了事件处理函数`handleParentClick`和`handleChildClick`。当点击子元素时,子元素的事件处理函数会被触发,并且调用了`event.stopPropagation()`方法来阻止事件冒泡。在调用`event.stopPropagation()`方法时,我们将`event`作为参数传入,这样就不会报错了。
阅读全文