vue项目遇见事件冒泡该如何处理详解
更新时间：2023年04月26日 09:30:11 作者：fury_123
冒泡事件处理是由内而外发生的,例如有两个父子div,给他们分别写上点击事件,点击子div先响应的是子div,再是父div,下面这篇文章主要给大家介绍了关于vue项目遇见事件冒泡该如何处理的相关资料,需要的朋友可以参考下
开发环境
- Win 10
- element-ui "2.8.2"
- Vue 2.9.6
事件冒泡简介
如下图，当我们点击页面某个元素时，会产生点击事件，事件由外到内，逐层递进（事件捕获阶段，途中的1->2->3->4），当目标元素捕捉到目标事件时，会响应事件，并由内到外，逐层往外传递(事件冒泡阶段，图中的4->5->6->7)，这便是事件冒泡。正式因为冒泡机制，当用户点击图中目标元素div时，5,6,7事件区的元素都会响应点击事件（如果具备响应事件能力的话）
实验1
<template>
<div>
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766">
div1
<div @click="fun2" style="padding:5px;border:2px solid #79CDCD;">
div2
<div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;">
div3
<div @click="fun4" style="border:2px solid #8470FF;">div4</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
fun1() {
console.log("点击了div1");
},
fun2() {
console.log("点击了div2");
},
fun3() {
console.log("点击了div3");
},
fun4() {
console.log("点击了div4");
}
}
};
</script>实验结果如下：
实验2
实验1的基础上，修改下代码，如下，@click ="fun3"改成@click.stop="fun3"
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766"> div1 <div @click="fun2" style="padding:5px;border:2px solid #79CDCD;"> div2 <div @click.stop="fun3" style="padding:5px; border:2px solid #BEBEBE;"> div3 <div @click="fun4" style="border:2px solid #8470FF;">div4</div> </div> </div> </div>
实验结果：
点击div4，输出如下：
实验3
实验1的基础上，修改下代码，如下，@click="fun4"改成@click.stop="fun4"
<div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766"> div1 <div @click="fun2" style="padding:5px;border:2px solid #79CDCD;"> div2 <div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;"> div3 <div @click.stop="fun4" style="border:2px solid #8470FF;">div4</div> </div> </div> </div>
实验结果：
结论
综合实验1,2,3可知，如果想阻止哪个元素的事件冒泡（即事件只针对该元素有效），只要给该元素的事件增加.stop修饰符即可。
到此这篇关于vue项目遇见事件冒泡该如何处理的文章就介绍到这了,更多相关vue事件冒泡处理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue element实现多个Formt表单同时验证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要给大家介绍了关于Vue项目启动白屏问题的几种解决办法,Vue项目打包后出现白屏的可能原因有很多,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了在VUE style中使用data中的变量的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
v-model绑定的变量无论是对象还是数组都是绑定的value值,下面这篇文章主要给大家介绍了关于vue中v-model如何绑定多循环表达式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
要求点击修改按钮之后部分输入框由禁用状态变为可用状态。下面我给大家分享一段实例代码基于vue组件中点击按钮后修改输入框的状态，需要的的朋友参考下2017-04-04
这篇文章主要介绍了vue如何实时往数组里追加数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
src/main.js是入口文件,主要作用是初始化vue实例并使用需要的插件, Vue.use()的作用就是让它里面被注册的组件能够被全局使用,本文通过实例代码介绍vue项目中main.js的用法,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要介绍了Vue3.x中使用element-plus的各种方式详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要为大家详细介绍了如何使用vue3.2 + elementPlus + pinia 实现多页签导航,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2023-12-12
今天小编就为大家分享一篇解决vue-cli webpack打包后加载资源的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论