测试程序
<!doctype html
>
<
html
>
<
head
>
<
title
>事件捕获顺序测试
</
title
>
<
meta
charset=
"utf-8"
>
<
style
text=
"txt/css"
>
div{
border:
1px
solid
red;
padding:
20px;
}
<
/
style
>
<
script
src=
"vue/vue.js"
>
<
/
script
>
</
head
>
<
body
>
<
div
id=
"xdd"
>
<
div
v-on:click=
"out(1)"
>
onclick 输出1
<
div
v-on:click=
"out(2)"
>
onclick 输出2
<
div
v-on:click=
"out(3)"
>
onclick 输出3
<
div
v-on:click=
"out(4)"
>
onclick 输出4
(DOM0级事件)
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
>
var
app=
new
Vue({
el:
"#xdd",
methods:{
out:
function(
n){
alert(
n);
}
}
})
<
/
script
>
</
body
>
</
html
>
测试1：初始状态下事件触发是冒泡模式下触发，点击div4输出：4 3 2 1；
测试2 .stop ：在div3上添加.v-on:click.stop="out(3)"
结果：点击div3 只输出3
点击div4 输出4 3
所以.stop的作用为使事件冒泡到该处为止，不再向外层元素冒泡
测试3 .capture ：在初始状态的程序div2上添加一个v-on:click.capture="out(2)"
结果：点击div2 输出 2 1
点击div3 输出 2 3 1
点击div4 输出 2 4 3 1
所以.capture会使事件在捕获阶段触发。
发现如果在div2上添加 v-on:click="out(5)"，则会在冒泡阶段触发div2的事件，div2上发生两次事件
测试4：.self div3上添加v-on:click="out(3)"
结果： 点击div3时 输出 3 2 1
点击div4时 输出 4 2 1 没有触发div3的事件
所以.self能够使该元素的只能单击自己时触发事件，同时这种情况下自己也会加入冒泡；但是不会加入其内部元素触发的冒泡中
测试5：.once div3上添加v-on:click="out(3)"
结果： 单击div4 输出 4 3 2 1
再次单击div4 输出 4 2 1
单击div3 输出2 1
所以 .once的作用使让该时间函数只会触发一次，不管是否是单击该元素触发还是在其他元素的冒泡阶段触发。