In Vue3 project development, bubbling events often lead to some unexpected problems. For example, when clicking a child element, the event of the parent element is accidentally triggered, or when clicking on the content area in the pop-up component, the pop-up window is unexpectedly closed.
1. What is event bubble?
Event bubbles are when an element triggers an event, which is propagated up to the parent element until it reaches the root element. This process is like bubbles in water, rising from the bottom.
<template>
<div @click="handleParentClick">
Parent element
<div @click="handleChildClick">
Sub-elements
</div>
</div>
</template>
<script setup>
const handleParentClick = () => {
('The parent element is clicked')
}
const handleChildClick = () => {
('Sub-elements are clicked')
}
</script>
When clicking on a child element, the console outputs:
The child element is clicked
Parent element is clicked
2. 5 ways to prevent events from bubbled up
1. Use the @ modifier (recommended)
This is the easiest and straightforward way, and the event modifier provided by Vue can be used directly in the template:
<template>
<div @click="handleParentClick">
Parent element
<div @="handleChildClick">
Sub-elements
</div>
</div>
</template>
2. Use () in event handler function
<template>
<div @click="handleParentClick">
Parent element
<div @click="handleChildClick">
Sub-elements
</div>
</div>
</template>
<script setup>
const handleChildClick = (event) => {
()
('Sub-elements are clicked')
}
</script>
3. Use the @ modifier (for specific scenarios)
When you want to trigger an event when you just click on the element itself and not its child element:
<template>
<div @="handleParentClick">
Parent element
<div @click="handleChildClick">
Sub-elements
</div>
</div>
</template>
4. Use @ and .stop combination (advanced usage)
In some complex scenarios, we may need to prevent the event from spreading during the capture phase:
<template>
<div @click="handleParentClick">
Parent element
<div @="handleChildClick">
Sub-elements
</div>
</div>
</template>
5. Use preventDefault and stopPropagation combination (block completely)
When it is necessary to block both default behavior and bubbling:
<template>
<div @click="handleParentClick">
Parent element
<div @click="handleCompleteStop">
Sub-elements
</div>
</div>
</template>
<script setup>
const handleCompleteStop = (event) => {
()
()
('Sub-elements are clicked')
}
</script>
3. Things to note
1.Don't overuse: Not all events need to be prevented from bubbling, and they must be decided based on actual needs.
2. Performance considerations: When a large number of elements need to prevent bubbles, it is recommended to use event delegate methods to deal with them.
3. Debugging skills: If an event handling exception is found, you can pass(event)Check the event object to help locate the problem.
4. Best Practices
<template>
<!-- recommend：use .stop Modifier -->
<div @="handleClick">
简单场景use
</div>
<!-- recommend：复杂逻辑use函数处理 -->
<div @click="handleComplexEvent">
复杂场景use
</div>
</template>
<script setup>
const handleComplexEvent = (event) => {
// Determine whether bubbles need to be prevented if (needToStop()) {
()
}
// Other business logic}
const needToStop = () => {
//Judge whether it is necessary to prevent bubbles based on business logic return true
}
</script>
Summarize
existVue3There are many ways to deal with bubbling events in the process. The key is to choose the appropriate solution according to the specific scenario.
Generally, use@Modifiers are the easiest and most effective way.
For complex scenarios, you can consider using()More flexible control in functions.
This is the end of this article about 5 methods to prevent events from bubbling. For more related content about Vue3 prevent events from bubbling, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!