<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
/*margin: 0;padding: 0;*/
}
#app{
width: 400px;
}
.outer{
background: #ff5000;
height: 300px;
margin-bottom: 40px;
}
.inter{
background: blue;
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div id="app">
<!-- 冒泡：從里到外 依次執(zhí)行事件 -->
<!-- 1 stop: 阻止冒泡
@click.stop = "click"
給誰添加就是阻止誰外面的事件執(zhí)行 比如：
給 btn 添加就是 inter 和 outer 都不執(zhí)行
給 inter 添加就是 outer 不執(zhí)行
-->
<div class="outer" @click="outerClick">
<div class="inter" @click="interClick">
<button class="btn" @click.stop.once="btnClick">btn</button>
</div>
</div>
<!-- 2 prevent: 阻止默認(rèn)事件的執(zhí)行
@click.prevent="click"
a標(biāo)簽的href被阻止 不會發(fā)生跳轉(zhuǎn)
-->
<!-- 3 once: 綁定的所有事件都只被觸發(fā)一次 once放事件前后無關(guān)
@click.prevent.once="aClick"
第一次會執(zhí)行 點(diǎn)擊事件aClick 和 阻止默認(rèn)事件
觸發(fā)了 a 點(diǎn)擊事件
從第二次開始不再執(zhí)行 點(diǎn)擊事件aClick 和 阻止默認(rèn)事件
會直接發(fā)生http://www.baidu.com跳轉(zhuǎn)
@click.once.stop="btnClick"
第一次會執(zhí)行 點(diǎn)擊事件btnClick 和 阻止冒泡的stop事件
觸發(fā)了 btn 點(diǎn)擊事件
從第二次開始不再執(zhí)行 點(diǎn)擊事件btnClick 和 阻止冒泡的stop事件
觸發(fā)了 inter 點(diǎn)擊事件
觸發(fā)了 outer 點(diǎn)擊事件
-->
<a href="http://www.baidu.com" @click.once.prevent="aClick">有問題找百度</a>
<!-- 4 self: 只當(dāng)事件在該元素本身（比如不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào)
添加self的事件不會被動執(zhí)行（比如不會冒泡），除非點(diǎn)擊的是該元素 比如
@click.self="outerClick"
點(diǎn)擊btn時(shí)：
觸發(fā)了 btn 點(diǎn)擊事件
觸發(fā)了 inter 點(diǎn)擊事件
點(diǎn)擊inter時(shí)：
觸發(fā)了 inter 點(diǎn)擊事件
點(diǎn)擊outer時(shí)：
觸發(fā)了 outer 點(diǎn)擊事件
@click.self="interClick"
點(diǎn)擊btn時(shí)：
觸發(fā)了 btn 點(diǎn)擊事件
觸發(fā)了 outer 點(diǎn)擊事件
點(diǎn)擊inter時(shí)：
觸發(fā)了 inter 點(diǎn)擊事件
觸發(fā)了 outer 點(diǎn)擊事件
點(diǎn)擊outer時(shí)：
觸發(fā)了 outer 點(diǎn)擊事件
@click.self="btnClick"
點(diǎn)擊btn時(shí)：
觸發(fā)了 btn 點(diǎn)擊事件
觸發(fā)了 inter 點(diǎn)擊事件
觸發(fā)了 outer 點(diǎn)擊事件
點(diǎn)擊inter時(shí)：
觸發(fā)了 inter 點(diǎn)擊事件
觸發(fā)了 outer 點(diǎn)擊事件
點(diǎn)擊outer時(shí)：
觸發(fā)了 outer 點(diǎn)擊事件
-->
<div class="outer" @click="outerClick">
<div class="inter" @click="interClick">
<button class="btn" @click.self="btnClick">btn</button>
</div>
</div>
<!-- 5 capture：事件捕獲
添加capture的先捕獲執(zhí)行 執(zhí)行之后其他的按照原來的冒泡順序執(zhí)行
-->
<div class="outer" @click.capture="outerClick">
<div class="inter" @click="interClick">
<button class="btn" @click="btnClick">btn</button>
</div>
</div>
</div>
<script src="vue.js"></script>
<script>
let vue = new Vue({
el:"#app",
methods:{
outerClick(){
console.log("觸發(fā)了 outer 點(diǎn)擊事件");
},
interClick(){
console.log("觸發(fā)了 inter 點(diǎn)擊事件");
},
btnClick(){
console.log("觸發(fā)了 btn 點(diǎn)擊事件");
},
aClick(){
console.log("觸發(fā)了 a 點(diǎn)擊事件")
}
}
})
</script>
</body>
</html>
