<> What is event bubbling
Talking about people is when you click on something , But it also triggers what this thing is attached to , If the child element and the parent element trigger the same event , When the child element is triggered, the parent element is also triggered by the bubbling mechanism , This is the basic principle of bubbling
<> How disgusting
for instance , You are in a span Or what element has an event written on it , This is when you are ready to click this element to show your girlfriend a good picture , Then there are other buttons on this element , At this point, you want your object to click the button without any reaction , It's only when you click the button that the page looks good , You didn't think about bubbling , It's done ,
For your girlfriend , Here's how it's shown !
<> Source code
<> Conventional writing
<template> <div> <common-back :currPage='currPage'> </common-back> <div
class="stopSty" @click="funDiv()"> <button @click="funBtn1()">button1</button>
<button @click="funBtn2()">button2</button> </div> </div> </template> <script>
export default { name: "stop", data(){ return { currPage:
this.$route.params.pageFlag, } }, methods: { funDiv() { console.info(" Beautiful page ")
}, funBtn1() { console.info(" Click button1") }, funBtn2() {
console.info(" Click button2") } } } </script> <style scoped> .stopSty { width:
300px; height: 300px; background: rebeccapurple; display: flex; flex-direction:
column; align-items: center; justify-content: center } .stopSty button {
height: 70px; width: 140px; background: #FFFFFF; border: none; color: black;
margin-top: 10px; } </style>
Click here button1 and button2 When all triggered the beautiful page this thing , The surprise was destroyed , You're breaking up with your partner at this time , hey , It's hard to find an object , Lost it …
what ? Why can I have a partner , Because I wrote this below
<> The way to stop bubbles
<template> <div> <common-back :currPage='currPage'> </common-back> <div
class="stopSty" @click="funDiv()"> <button
@click.stop="funBtn1()">button1</button> <button
@click.stop="funBtn2()">button2</button> </div> </div> </template>
Isn't it really amazing , In this way, the writing will not appear and the button will be triggered div What happened !
I always thought that only demo Only by showing it can we directly explain the problem , I think so , It's the same thing , I hope it can help you understand ! I don't like long words , A piece of code , A picture , That's enough !
The source code is in mine github,github It's on the left side of my blog !
Technology