<> 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 !

©2020 ioDraw All rights reserved
0.96OLED display -4 Line SPI explain C++11 of std::function,std::bind,std::placeholdersJavaScript study ( Function declaration and parameters )QTabWidget Style sheet settings The project passed idea Package and publish to tomcat The server postman Interface test get timestamp and MD5 encryption react Background management configuration route and sidebar :python Simple game code -10 Minutes Python Write a snake game , simple You know? Python What does the foundation include ? Learn something ?10 individual Python Introduction to crawler