vue项目遇见事件冒泡该怎么处理

今天小编给大家分享一下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" >
            div1
            <div @click="fun2" >
                div2
                <div @click="fun3" >
                    div3
                    <div @click="fun4" >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" >
            div1
            <div @click="fun2" >
                div2
                <div @click.stop="fun3" >
                    div3
                    <div @click="fun4" >div4</div>
                </div>
            </div>
        </div>

实验结果： 

点击div4，输出如下：

实验3

实验1的基础上，修改下代码，如下，@click="fun4"改成@click.stop="fun4"

       <div id="app" @click="fun1" >
            div1
            <div @click="fun2" >
                div2
                <div @click="fun3" >
                    div3
                    <div @click.stop="fun4" >div4</div>
                </div>
            </div>
        </div>

实验结果：

以上就是“vue项目遇见事件冒泡该怎么处理”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。