转
<!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>