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