vue的事件修饰符之.stop

.stop 的功能是用来阻止事件冒泡。

那么什么是事件冒泡呢?举个例子来说明一下:

设定两个div,粉色的div包裹在蓝色的div中。点击对应颜色的div会出现对应的颜色提示,

具体代码如下:

<div style="width: 300px;height: 300px; background-color: lightblue;" @click="blue()">
	<div style="width: 200px;height: 200px; background-color: lightpink;" @click.stop="pink()"></div>
</div>
blue(){
	alert('蓝色')
},
pink(){
	alert('粉色')
},

效果如下:

 

按常理来说,点击粉色区域时会提示“粉色”,按蓝色区域时会提示“蓝色” 。

但是实际上,在你点击粉色区域的同时,其下面的蓝色区域(父标签)也会被点击,导致页面会先后提示"粉色"与"蓝色",这种现象就是所谓的事件冒泡

解决方法:

用.stop去阻止事件的冒泡:内部标签中的点击事件用.stop进行修饰,阻止冒泡。

<div style="width: 200px;height: 200px; background-color: lightpink;" @click.stop="pink()">
</div>

这样,当点击粉色区域时,就不会触发蓝色区域的点击事件了。

  • 7
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值