轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修飾符：self capture stop prevent的使用</title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="demo">
<!--第一種情況-->
<!--<div @click="divEven" style="border:1px #188eee solid;">-->
<!--<a href="www.baidu.com" @click="aEven">百度鏈接</a>-->
<!--</div>-->
<!--stop的使用：阻止事件冒泡的發生-->
<!--<div @click="divEven" style="border:1px #188eee solid;">-->
<!--<a href="www.baidu.com" @click.stop="aEven">百度鏈接</a>-->
<!--</div>-->
<!--prevent的使用：阻止默認事件的發生-->
<!--<div @click="divEven" style="border:1px #188eee solid;">-->
<!--<a href="www.baidu.com" @click.stop.prevent="aEven">百度鏈接</a>-->
<!--</div>-->
<!--self的使用：只有點擊他本身時才去執行，點擊他的子元素不去執行-->
<!--<div @click.self="divEven" style="border:1px #188eee solid;">-->
<!--<a href="www.baidu.com" @click.prevent="aEven">百度鏈接</a>-->
<!--</div>-->
<!--capture的使用：觸發捕獲事件()先執行大盒子的事件，起執行小盒子的事件-->
<div @click.capture="divEven" style="border:1px #188eee solid;">
<a href="www.baidu.com" @click.prevent="aEven">百度鏈接</a>
</div>
</div>
<script>
new Vue({
el:"#demo",
methods:{
divEven(){
alert("我是div的事件");
},
aEven(){
alert("我是a鏈接事件");
}
}
});
</script>
</body>
</html>