什么是冒泡事件？
| 代名词 | 说明 |
|---|
| 脚本中的冒泡事件 | 就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了子div的onclick事件后，子div进行相应的js操作。但是父div的onclick事件同样会被触发。这就造成了事件的多层并发，导致了页面混乱。这就是冒泡事件。 |
实例
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title>冒泡事件</title><script type="text/javascript" src="../js/Vue2.6.11.js"></script><style type="text/css">#inner{width:100%;height: 100px;background-color: #11EE3D;}#outer{padding: 50px;background-color: #EE3D11;}</style></head><body><div id="app"><div id="outer" v-on:click="outer_click"><div id="inner" v-on:click="inner_click"><input type="button" name="" id="" value="点击,请看控制台" v-on:click="button_click" /></div></div></div><script type="text/javascript">var vm=new Vue({el:'#app',methods:{button_click:function(){console.log('触发了按钮的click事件')},inner_click:function(){console.log('触发了inner层的click事件')},outer_click:function(){console.log('触发了outer层的click事件')}}});</script></body>
</html>
效果
