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>

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