Vue的事件：獲取事件對象$event；
事件冒泡：事件會向上傳播
原生js阻止事件冒泡，需要先獲取事件對象，再調用stopPropagation()方法；
vue事件修飾符stop，例@clik.stop；
事件默認行為：
原生js方式需要獲取事件對象，再調用preventDefault()方法；
在vue中則使用修飾符prevent，例@clik.prevent
先在button中加入獲取對象$event
在控制台可以打印出該事件，可以看出target中有innerHTML
通過e.target.innerHTML,獲取button標簽上的名稱：
vue；
<script> window.onload= () =>{ let vm=new Vue({ el:'#two', data:{ result:0 }, methods:{ show(e){ alert("歡迎來到perfect*博客園！！！"); console.log('歡迎來到perfect*博客園！！！'); console.log(e.target.innerHTML); }, add(a,b){ console.log("add"); console.log(this==vm); this.result +=a+b; } } }) } </script>
html:
<body>
<div id="two">
<button @click="show($event)">歡迎來到perfect*博客園 A</button>
<button @click="show($event)">歡迎來到perfect*博客園 B</button>
<button @click="add(1,2)">進行綁定數據相加的方法add()</button>
result:{{result}}
</div>
</body>
綁定mouseenter時可以一直觸發
<button @mouseenter="add(10,20)">進行綁定數據相加的方法add()</button><br/>
result:{{result}}<br/>
當使用once時只能觸發一次，之后鼠標進入時無效果：
<button @mouseenter.once="add(10,20)">進行綁定數據相加的方法add()</button><br/>
result:{{result}}<br/>
事件冒泡：
點擊一個獲取對象的事件按鈕，會發生調用寫的三個方法：
該問題的代碼：
<script> window.onload= () =>{ let vm=new Vue({ el:'#two', data:{ result:0 }, methods:{ show(e){ console.log('歡迎來到perfect*博客園！！！'); console.log(e.target.innerHTML); }, showA(){ console.log('歡迎來到perfect*博客園！！！A'); }, showB(){ console.log('歡迎來到perfect*博客園！！！B'); }, } }) } </script> <body> <div id="two"> <!--事件冒泡--> <div @click="showA()"> <div @click="showB()"> <button @click="show($event)">歡迎來到perfect*博客園 A!!!!!!</button> </div> </div> </div> </body>
解決冒泡問題的方法：
vue:在button事件中獲取對象的button中的click加.stop即可；
javascript:使用e.stopPropagation();
從圖中可以看出來，使用.stop時只使用了show方法
<button @click.stop="show($event)">歡迎來到perfect*博客園 A!!!!!!</button>
JavaScript代碼：
show(e){ console.log('歡迎來到perfect*博客園！！！'); console.log(e.target.innerHTML); e.stopPropagation(); }
阻止事件的默認行為
vue:使用.prevent進行阻止;
javascript:使用e.preventDefault()實現;
使用a標簽作為示例，初始時可以跳轉：
使用.prevent時，怎么點擊都不能進行跳轉：
HTML：
<!-- 阻止事件的默認行為--> <a href="HelloVue.html" @click.prevent=showLink($event)>Click Link!!!</a>
vue:
showLink(){ console.log("已阻止鏈接的跳轉！！"); }
使用JavaScript的寫法效果同上，代碼：
HTML：
<!-- 阻止事件的默認行為--> <a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a>
vue:
showLink(e){ console.log("已阻止鏈接的跳轉！！"); e.preventDefault(); }
以上示例所有的代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>event</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{ 10 11 12 let vm=new Vue({ 13 el:'#two', 14 data:{ 15 result:0 16 17 18 }, 19 methods:{ 20 21 // show(e){ 22 // 23 // 24 // console.log('歡迎來到perfect*博客園！！！'); 25 // console.log(e.target.innerHTML); 26 // e.stopPropagation(); 27 // }, 28 29 // add(a,b){ 30 // console.log("add"); 31 // console.log(this==vm); 32 // this.result +=a+b; 33 // 34 // }， 35 36 // 37 // showA(){ 38 // 39 // console.log('歡迎來到perfect*博客園！！！A'); 40 // }, 41 // showB(){ 42 // 43 // console.log('歡迎來到perfect*博客園！！！B'); 44 // }, 45 46 showLink(e){ 47 console.log("已阻止鏈接的跳轉！！"); 48 e.preventDefault(); 49 50 51 } 52 53 54 55 56 57 } 58 59 60 61 62 63 }) 64 } 65 66 </script> 67 68 <body> 69 <div id="two"> 70 <!--<button @click="show($event)">歡迎來到perfect*博客園 A</button><br/> 71 <button @click="show($event)">歡迎來到perfect*博客園 B</button><br/> 72 73 74 <button @click="add(1,2)">進行綁定數據相加的方法add()</button><br/> 75 result:{{result}}<br/> 76 77 <button @mouseenter.once="add(10,20)">進行綁定數據相加的方法add()</button><br/> 78 result:{{result}}<br/> 79 --> 80 81 82 <!--事件冒泡--> 83 <!--<div @click="showA()"> 84 85 <div @click="showB()"> 86 <button @click="show($event)">歡迎來到perfect*博客園 A!!!!!!</button> 87 </div> 88 </div>--> 89 90 <!-- 阻止事件的默認行為--> 91 <a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a> 92 93 94 95 96 </div> 97 </body> 98 </html>