事件修饰符的介绍
目录
一、事件修饰符
二、代码
一、事件修饰符：
1.stop 阻止冒泡
2.prevent阻止默认事件
3.capture添加事件侦听器时使用事件捕获模式
4.self只当事件在该元素本身(（比如不是子元素)触发时触发回调
5.once事件只触发—次
二、代码
<head>
<meta charset="UPr-8">
<meta name="viewport" content="width=device-width，initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src=" . /lib/vue-2.4.0.js"></script>
<style>
.inner {
height: 150px;
background-color: darkcyan ;
}
.outer {
padding: 40px;
background-color:red;
}
</style>
</ head>
<body>
<div id=”app”>
<!—使用.stop阻止冒泡-->
<!--<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>-->
<!--使用 .prevent阻止默认行为-->
<!--<a herf=http://www.baidu.com @click.prevent=”linkClick”>有问题，先去百度</a>-->
<!--使用 .capture实现捕获触发事件的机制-->
<!--<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>-->
<!--使用 .self实现只有当前元素时候，才会触发事件处理函数-->
<!--<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>-->
<!--使用 .once只触发一次事件处理函数-->
<!--<a herf=http://www.baidu.com @click.prevent.once=”linkClick”>有问题，先去百度</a>-->
<!--演示： .stop和.self的区别-->
<!--<div class=”outer” @click=”div2Handler”>
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>-->
<!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为-->
<!--<div class=”outer” @click=”div2Handler”>
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.self="btnHandler">
</div>
</div>-->
</div>
<script>
//创建vue 实例，得到ViewMode1
var vm= new vue ({
el: ‘#app’,
data: { },
methods: {
div1Handler(){
console. log('这是触发了inner div的点击事件')
},
btnHandler(){
console. log('这是触发了btn按钮的点击事件')
},
linkClick(){
console.log(‘触发了连接的点击事件’)
},
div2Handler(){
console.log(‘这是触发了innder div的点击事件’)
}，
}
});
</script>
</body>
