vue 阻止事件冒泡常用的方法

桃扇骨 2023-10-11 23:07 114阅读 0赞

![3d663eb17366489c887301c0193ee88a.jpeg][]

在 Vue 中，阻止事件冒泡有两种常用方法：  
1. 使用 \`event.stopPropagation()\` 方法：  
在事件处理函数中，可以通过调用事件对象的 \`stopPropagation()\` 方法来阻止事件冒泡。例如：  
\`\`\`html  
<template>  
<div @click="parentClick">  
<button @click="childClick">点击我</button>  
</div>  
</template>  
<script>  
export default \{  
methods: \{  
parentClick() \{  
console.log('父元素被点击');  
\},  
childClick(event) \{  
event.stopPropagation();  
console.log('子元素被点击');  
\},  
\},  
\};  
</script>  
\`\`\`  
在这个例子中，当点击按钮时，只会触发 \`childClick\` 方法，而不会触发 \`parentClick\` 方法。  
2. 使用 Vue 的修饰符 \`.stop\`：  
Vue 提供了一种更简洁的方式来阻止事件冒泡，那就是使用 \`.stop\` 修饰符。例如：  
\`\`\`html  
<template>  
<div @click="parentClick">  
<button @click.stop="childClick">点击我</button>  
</div>  
</template>  
<script>  
export default \{  
methods: \{  
parentClick() \{  
console.log('父元素被点击');  
\},  
childClick() \{  
console.log('子元素被点击');  
\},  
\},  
\};  
</script>  
\`\`\`  
在这个例子中，我们在 \`@click\` 事件上添加了 \`.stop\` 修饰符，这样就可以阻止事件冒泡，只触发 \`childClick\` 方法。这种方法更简洁，推荐使用。

**常用的vue阻止事件冒泡代码 :**

1. @click.stop：在模板中使用，阻止点击事件冒泡。  
\`\`\`  
<template>  
<div @click.stop="handleClick">  
<button>Click me</button>  
</div>  
</template>  
\`\`\`  
2. event.stopPropagation()：在方法中使用，阻止事件冒泡。  
\`\`\`  
<template>  
<div @click="handleClick">  
<button @click="handleButtonClick">Click me</button>  
</div>  
</template>  
<script>  
export default \{  
methods: \{  
handleClick(event) \{  
console.log('div clicked');  
\},  
handleButtonClick(event) \{  
event.stopPropagation();  
console.log('button clicked');  
\}  
\}  
\}  
</script>  
\`\`\`  
3. .stop：在指令中使用，阻止事件冒泡。  
\`\`\`  
<template>  
<div v-on:click.stop="handleClick">  
<button>Click me</button>  
</div>  
</template>  
\`\`\`

[3d663eb17366489c887301c0193ee88a.jpeg]: https://img-blog.csdnimg.cn/3d663eb17366489c887301c0193ee88a.jpeg