vue入门6：如何解决事件冒泡

69 阅读 0 评论 46 点赞

我是靠谱客的博主危机舞蹈，最近开发中收集的这篇文章主要介绍vue入门6：如何解决事件冒泡，觉得挺不错的，现在分享给大家，希望可以做个参考。

一、何为事件冒泡

当你执行一个函数时，外层的函数也跟着一起执行了。

举个例子

在ul和第一个li中绑定一个点击函数

<ul name="水果" @click="ulclick()">
	<li name="苹果" @click="liclick()">苹果</li>
	<li name="橘子">橘子</li>
	<li name="香蕉">香蕉</li>
</ul>

methods:{
					liclick(){
						console.log("苹果被点击")
					},
					ulclick(){
						console.log("水果被点击")
					}
				}

如果我点击了苹果，应该输出苹果被点击对吧

我们看一下运行结果

运行结果：

当我点击苹果的时候，不但输出苹果被点击，还输出了水果被点击，也就是外层的ul中的函数也被执行了，这就是事件冒泡
在这里插入图片描述

利用vue的事件修饰符（.stop）来调用e.stopPropagation()函数即可阻止事件冒泡

<li name="苹果" @click.stop="liclick()">苹果</li>

运行结果：

这次点击苹果，控制台只输出苹果被点击，事件冒泡解决了在这里插入图片描述

以上就是危机舞蹈为你收集整理的vue入门6：如何解决事件冒泡的全部内容，希望文章能够帮你解决vue入门6：如何解决事件冒泡所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。