development environment
Win 10
element-ui "2.8.2"
Vue 2.9.6
Introduction to event bubbling
As shown in the figure below, when we click on an element on the page, a click event will be generated, and the event will progress layer by layer from outside to inside (event capture phase, 1->2->3->4 on the way), when the target element captures When the target event is reached, it will respond to the event and pass it layer by layer from inside to outside (event bubbling stage, 4->5->6->7 in the figure), this is event bubbling. Formally because of the bubbling mechanism, when the user clicks the target element div in the figure, the elements in the 5, 6, and 7 event areas will all respond to the click event (if they have the ability to respond to events)
Experiment 1
<template>
<div>
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
fun1() {
console.log("Clicked on div1");
},
fun2() {
console.log("Clicked on div2");
},
fun3() {
console.log("Clicked on div3");
},
fun4() {
console.log("Clicked on div4");
}
}
};
</script>
The experimental results are as follows:
Experiment 2
On the basis of Experiment 1, modify the code as follows, @click = "fun3" is changed to @click.stop = "fun3"
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click.stop="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
Experimental results:
Click on div4, the output is as follows:
Experiment 3
On the basis of Experiment 1, modify the code as follows, @click="fun4" is changed to @click.stop="fun4"
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click.stop="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
Experimental results:
in conclusion
Comprehensive experiments 1, 2, and 3 show that if you want to prevent the event bubbling of an element (that is, the event is only valid for this element), you only need to add the .stop modifier to the event of the element.