正文
Vue中的事件与常见的问题处理
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
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();
}
以上示例所有的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{ let vm=new Vue({
el:'#two',
data:{
result:0 },
methods:{ // show(e){
//
//
// console.log('欢迎来到perfect*博客园！！！');
// console.log(e.target.innerHTML);
// e.stopPropagation();
// }, // add(a,b){
// console.log("add");
// console.log(this==vm);
// this.result +=a+b;
//
// }， //
// showA(){
//
// console.log('欢迎来到perfect*博客园！！！A');
// },
// showB(){
//
// console.log('欢迎来到perfect*博客园！！！B');
// }, showLink(e){
console.log("已阻止链接的跳转！！");
e.preventDefault(); } } })
} </script> <body>
<div id="two">
<!--<button @click="show($event)">欢迎来到perfect*博客园 A</button><br/>
<button @click="show($event)">欢迎来到perfect*博客园 B</button><br/> <button @click="add(1,2)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/> <button @mouseenter.once="add(10,20)">进行绑定数据相加的方法add()</button><br/>
result:{{result}}<br/>
--> <!--事件冒泡-->
<!--<div @click="showA()"> <div @click="showB()">
<button @click="show($event)">欢迎来到perfect*博客园 A!!!!!!</button>
</div>
</div>--> <!-- 阻止事件的默认行为-->
<a href="HelloVue.html" @click=showLink($event)>Click Link!!!</a> </div>
</body>
</html>
$event、事件冒泡、阻止事件的默认行为代码
