Vue之事件冒泡
阿新 • • 發佈：2017-10-22
htm 執行 src -s ble input spa 按鈕 width
1. 原生事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable"content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ }, methods:{ show:function(ev){ alert(1); //ev.cancelBubble=true; }, show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按鈕" @click="show($event)"> </div> </div> </body> </html>
事件冒泡：
從內向外擴散，點擊input,會擴散到外層的div,一直向上擴散。點擊完按鈕，會依次執行事件show()和show2()
結果：
先彈出1，後彈出2
使用原生js取消冒泡：ev.cancelBubble=true;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ }, methods:{ show:function(ev){ alert(1); ev.cancelBubble=true; }, show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按鈕" @click="show($event)"> </div> </div> </body> </html>
點完按鈕後，只彈出1來。
2.Vue中事件冒泡
取消事件冒泡：使用 .stop來取消事件冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <style> </style> <script src="vue.js"></script> <script> window.onload=function(){ new Vue({ el:‘#box‘, data:{ }, methods:{ show:function(){ alert(1); }, show2:function(){ alert(2); } } }); }; </script> </head> <body> <div id="box"> <div @click="show2()"> <input type="button" value="按鈕" @click.stop="show()"> </div> </div> </body> </html>
Vue之事件冒泡