vue之.capture修饰符和.self修饰符

静Yu
1,200 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情

.capture修饰符

通过之前的学习，我们可以了解到事件捕获与事件冒泡是一对相反的事件处理流程，如果想要将页面元素的事件流改为事件捕获模式，只需要在父级元素的事件上使用.capture修饰符就可以了。

<div id="app" class="divDefault">
	<div id="div1" @click="divHandlerClick">
		<input type="button" value="单击" @click="btnHandlerClick" />
	</div>
	</div>
	<script>
		var vm =new Vue({
		el:'#app',
		data:{},
		methods:{
			divHandlerClick(){
				alert('我是div的单击事件！')
			},
			btnHandlerClick(){
				alert('我是button的单击事件！')
			}	
		}
		}) ;
	</script>

上述代码中，如果在div绑定的单击事件上使用.capture修饰符，则单击按钮首先触发的就是最外侧的div的事件。关键是父级元素的单击事件中加了.capture，再单击按钮时先弹出“我是div的单击事件！”，然后弹出“我是button的单击事件”，即与原来的事件冒泡方式相反。

.self修饰符

加上.self修饰符后，只能在event.target是当前元素自身时触发处理函数。

<div id="app" class="divDefault">
	<div id="div1" @click="divHandlerClick">
		<input type="button" value="单击" @click="btnHandlerClick" />
	</div>
	</div>
	<script>
		var vm =new Vue({
		el:'#app',
		data:{},
		methods:{
			divHandlerClick(){
				alert('我是div的单击事件！')
			},
			btnHandlerClick(){
				alert('我是button的单击事件！')
			}	
		后触发
		}) ;
	</script>

还是本段代码，为div绑定了一个单击事件，假设本意是只有单击div后触发这个事件，而实际情况是不论事件冒泡还是捕获都会触发这个事件，这与本意不符。在vue中，可以使用.self修饰符去修饰事件，让这个事件只有在单击.self修饰符所在的节点时才触发。

<style>
.divDefault{
    background-color:red;
    width:200px;
    height:100px;
}

#div1{
background-color:blue;
height:50px;
}
</style>
<div id="app" class="divDefault">
	<div id="div1" @click="divHandlerClick">
		<input type="button" value="单击" @click="btnHandlerClick" />
	</div>
	</div>
	<script>
		var vm =new Vue({
		el:'#app',
		data:{},
		methods:{
			divHandlerClick(){
				alert('我是div的单击事件！')
			},
			btnHandlerClick(){
				alert('我是button的单击事件！')
			}	
		后触发
		}) ;
	</script>

只有单击div1本身时才会触发divHandlerClick()事件。单击div1内部的button时不会触发divHandlerClick()，只会触发button绑定的事件，与在button单击事件中用.stop修饰符阻止冒泡效果一样，但是实现的机理是不一样的。实际上，通过.self修饰符的单击button按钮会失去尝试冒泡传播事件，但是传播到div1时，发现传播过来的事件不是div1本身触发的。所以不会触发div1的单击事件。然而，通过.stop修饰button的单击事件，直接就阻止了事件的传播。

avatar
文章
阅读
粉丝