Vue中的事件與常見的問題處理

時間 2020-05-22

標籤 vue 事件常見的問題處理简体版

原文原文鏈接

Vue的事件：獲取事件對象$event；javascript

事件冒泡：事件會向上傳播html

原生js阻止事件冒泡，須要先獲取事件對象，再調用stopPropagation()方法；vue

vue事件修飾符stop，例@clik.stop；java

事件默認行爲：ide

原生js方式須要獲取事件對象，再調用preventDefault()方法；this

在vue中則使用修飾符prevent，例@clik.preventspa

先在button中加入獲取對象$eventcode

在控制檯能夠打印出該事件，能夠看出target中有innerHTMLhtm

經過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>