.stop 组织冒泡
.stop 只当事件在该元素自身时触发回调
.prevent 阻止默认冒泡
.once 事件只触发一次
<!-- <a href="https://www.baidu.com" @click.prevent.once="aHandler">百度</a> -->
.capture 添加事件侦听器时使用事件捕获模式 从外到里输出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
.innet{
height: 150px;
background-color: darkcyan;
}
.ad{
padding: 50px;
background-color: red;
}
</style>
<body>
<div id="app">
<div class="innet" @click="divHandler">
<input type="button" value="戳他" @click.self="btnHandler">
</div>
<!-- <a href="https://www.baidu.com" @click.prevent.once="aHandler">百度</a> -->
<div class="ad" @click="aHandler">
<div class="innet" @click="divHandler">
<input type="button" value="戳他" @click.self="btnHandler">
</div>
</div>
<div class="ad" @click="aHandler">
<div class="innet" @click="divHandler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
</div>
</body>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{
divHandler(){
console.log('触发了div的点击事件')
},btnHandler(){
console.log('触发了btn的点击事件')
},aHandler(){
console.log('触发了ad的点击事件')
}
}
})
</script>
</html>