在Vue中，阻止事件冒泡可以通过两种方式实现：使用.stop修饰符或者在事件处理函数中使用event.stopPropagation()方法。
1. 使用.stop修饰符
在Vue中，我们可以在事件处理函数前添加.stop修饰符来阻止事件冒泡，这个修饰符会调用当前事件对象的stopPropagation()方法，从而阻止事件进一步传播。
我们有一个点击事件处理函数，我们希望在这个函数内部阻止事件冒泡，可以这样写：
<template>
<div @click="handleClick">
点击我
<div @click.stop="handleInnerClick">内部点击我</div>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('外部点击');
},
handleInnerClick() {
console.log('内部点击');
}
}
}
</script>
在这个例子中，当我们点击内部的div时，只会触发handleInnerClick函数，而不会触发handleClick函数，这是因为我们在handleInnerClick函数前添加了.stop修饰符，阻止了事件冒泡。
2. 在事件处理函数中使用event.stopPropagation()方法
除了使用.stop修饰符，我们还可以在事件处理函数中使用event.stopPropagation()方法来阻止事件冒泡，这个方法会调用当前事件对象的stopPropagation()方法，从而阻止事件进一步传播。
我们有一个点击事件处理函数，我们希望在这个函数内部阻止事件冒泡，可以这样写：
<template>
<div @click="handleClick">
点击我
<div @click="handleInnerClick">内部点击我</div>
</div>
</template>
<script>
export default {
methods: {
handleClick(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('外部点击');
},
handleInnerClick() {
console.log('内部点击');
}
}
}
</script>
在这个例子中，当我们点击内部的div时，只会触发handleInnerClick函数，而不会触发handleClick函数，这是因为我们在handleClick函数中使用了event.stopPropagation()方法，阻止了事件冒泡。
相关问题与解答
问题1：Vue中的事件修饰符有哪些？
Vue中的事件修饰符有以下几种：
.prevent：阻止默认事件（如提交表单）和事件冒泡，等同于调用event.preventDefault()和event.stopPropagation()。
.self：只有在事件是从侦听器绑定的元素本身触发时才触发回调，只适用于事件绑定到元素或子组件实例的情况，不适用于绑定到静态根节点的情况，也可以用来阻止事件向父组件或子组件冒泡。
.once：只触发一次回调，当在组件的生命周期内触发时，会自动解绑事件，也可以手动调用vm.$off('event', callback)来解绑。
.passive：用于改善移动端的性能，如果事件处理程序是一个耗时较长的操作，如滚动、拖拽等，则设置为true可以提高性能，因为浏览器会在事件开始时设置一个标志，如果在接下来的事件循环中没有发生任何事件，则会执行该操作，如果在这段时间内发生了其他事件，则不会执行该操作，这可以避免频繁的事件处理程序导致页面卡顿，需要注意的是，只有部分浏览器支持这个特性。
.capture：使用事件的捕获阶段；也就是说，内部元素触发的事件先在此处理，然后才交由内部元素进行处理，不保证能捕获所有类型的事件，不支持某些浏览器的捕获阶段，通常来说，我们应该避免使用这个修饰符，因为它可能导致一些不可预见的问题。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/254677.html
微信扫一扫 