vue.js中的事件修飾符的使用
阿新 • • 發佈：2019-02-15
事件修飾符:
.stop .prevent .capture .self .once
1 .stop：阻止事件冒泡。
2.prevent：阻止預設事件。
3.capture：新增事件偵聽器時使用事件捕獲模式 （若有多個該修飾符的元素則由外而內觸發）。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue"> 4.self：當事件在該元素本身（而不是子元素）觸發時觸發回撥(即直接作用在該元素上的事件才可以執行)。
例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://unpkg.com/vue"></script>
<style>
body,div{
margin: 0;padding: 0;
}
#vue-app{
width: 400px;
height: 400px;
background-color: skyblue;
}
.div1{
width: 300px;
height: 300px;
background-color: pink;
}
.div2{
width: 200px;
height: 200px;
background-color: silver;
}
.div3{
width: 100px;
height: 100px;
background-color: #ccc;
}
.div4{
width: 50px;
height: 50px;
background-color: #ddd;
}
</style>
</head>
<body>
<div id="vue-app"><!--根容器-->
<div class="div1" v-on:click.capture="alert(1)">
<div class="div2" v-on:click.self="alert(2)">
<div class="div3" v-on:click="alert(3)">
<div class="div4" v-on:click="alert(4)"></div>
</div>
</div>
</div>
</div>
<!--結果為1 4 3-->
<script>
new Vue({
el:"#vue-app",
methods:{
alert: function(val){
alert(val);
}
}
});
</script>
</body>
</html>5.once：事件只能觸發一次。