<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<style type="text/css">
.inner{
height: 150px;
background-color: darkcyan;
}
.outer{
padding: 30px;
background-color: aqua;
}
</style>
<body>
<!--创建一个控制区-->
<div id="app">
<!--使用 .stop 阻止冒泡-->
<!--<div class="inner" @click="divHandler">
<input type="button" value="点他" @click.stop="btnHandler"/>
</div>-->
<!--使用.prevent阻止默认行为-->
<!--<a href="http://www.taobao.com" @click.prevent="linkClick">淘到你需要</a>-->
<!--使用 .capture 实现捕获(由外向内)触发事件的机制-->
<!--<div class="inner" @click.capture="divHandler">
<input type="button" value="点他" @click.stop="btnHandler"/>
</div>-->
<!--使用 .self 实现只有点击当前元素时,才会触发事件-->
<!--<div class="inner" @click.self="divHandler">
<input type="button" value="点他" @click.stop="btnHandler"/>
</div>-->
<!--使用 .once 只触发一次事件-->
<!--<a href="http://www.taobao.com" @click.prevent.once="linkClick">淘到你需要</a>-->
<!--.stop 和 .self 的区别-->
<!--<div class="outer" @click="wrappdiv">
<div class="inner" @click="divHandler">
<input type="button" value="点他" @click.stop="btnHandler"/>
</div>
</div>-->
<!--.self只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为-->
<!--<div class="outer" @click="wrappdiv">
<div class="inner" @click.self="divHandler">
<input type="button" value="点他" @click.stop="btnHandler"/>
</div>
</div>-->
</div>
<script>
//实力例化对象
var vm=new Vue({
el:'#app',
data:{},
methods:{
divHandler(){
console.log("触发了 inner div 的点击事件")
},
btnHandler(){
console.log("触发了 btn div 的点击事件")
},
linkClick(){
console.log("触发了 链接 的点击事件")
},
wrappdiv(){
console.log("这是触发了 outer div 的点击事件")
}
}
})
</script>
</body>
</html>