学过js的大概都应该知道,阻塞,冒泡之间的关系和区别。通常情况下,事件触发机制的顺序是:捕获阶段 ===》目标阶段 ===》冒泡阶段。通俗的说,就是在嵌套标签元素的时候,每个标签元素都有点击事件,那么点击子标签的时候,父子孙爷上的点击事件的触发顺序。
先把实验代码放上去
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bubble event</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<style type="text/css">
body{margin:0;}
.one{
width:500px;
height:300px;
background:rgb(255,0,0);
}
.two{
width:400px;
height:260px;
background:rgb(255,50,50);
}
.three{
width:300px;
height:240px;
background:rgb(255,100,100);
}
.four{
width:200px;
height:200px;
background:rgb(255,150,150);
}
</style>
</head>
<body>
<div id="app">
<div class='one' @click="func('one')">
1
<div class='two' @click="func('two')">
2
<div class='three' @click="func('three')">
3
<div class='four' @click="func('four')">
4
</div>
</div>
</div>
</div>
</div>
<script>
var vmob = new Vue({
el:"#app",
methods: {
func(data){
console.log("触发了"+data)
}
},
})
</script>
</body>
</html>
现在主要修改的地方就是,在4个@click后面添加修饰符来说明,stop和self,capture的区别。
这个三个修饰符,对于点击自身的时候,自己的事件都会触发,只是触发时机不同。
stop:是阻值冒泡,意思就是,事件触发行为不在向后传递,为什么不是说不向父组件传递呢?是因为上面已经提到,事件触发的顺序是 :捕获阶段 ===》目标阶段 ===》冒泡阶段。如果父组件的排序是在捕获阶段,那父组件还是会触发。比如这种情况
<div id="app">
<div class='one' @click.capture="func('one')">
1
<div class='two' @click="func('two')">
2
<div class='three' @click.stop="func('three')">
3
<div class='four' @click="func('four')">
4
</div>
</div>
</div>
</div>
</div>
self:意思就是,不会被别人的触发的点击事件触发,只会是自己被点击的时候被触发。但重点是,冒泡事件,只是在遇到带有self修饰符的div时,不会去触发它,但是冒泡还是会向下传递。
<div id="app">
<div class='one' @click.capture="func('one')">
1
<div class='two' @click="func('two')">
2
<div class='three' @click.self="func('three')">
3
<div class='four' @click="func('four')">
4
</div>
</div>
</div>
</div>
</div>
capture:触发时机变为捕获。
<div id="app">
<div class='one' @click="func('one')">
1
<div class='two' @click.capture="func('two')">
2
<div class='three' @click.capture="func('three')">
3
<div class='four' @click="func('four')">
4
</div>
</div>
</div>
</div>
</div>
总结:capture类似于权重,都有capture修饰时,父亲权重更大,触发越靠前。
self,类似于特例,不干扰别人的事情,只是别人也别想触发自己。stop就是不在将事件触发往下传递。