vue子元素绑定的事件, 阻止触发父级上的事件处理

最新推荐文章于 2023-04-21 09:37:58 发布

phpzx.cn

最新推荐文章于 2023-04-21 09:37:58 发布

阅读量1.9k

点赞数 1

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/Dong_Alex/article/details/119085571

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

index1.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }

    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    

<script src="../../libs/vue.js"></script>
<script>
/*
该用例 li的点击事件, 在li本身绑定的事件发生完, 会触发父级ul上绑定的事件(冒泡)
index2-4 将会用3种方式进行解决
*/
</script>

</head>
<div id="app">
   <ul class="parent" @click="parent">
       <li class="child" @click="child">1</li>
       <li class="child" @click="child">2</li>
       <li class="child" @click="child">3</li>
   </ul>
</div>

<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
                alert('this is parent')
            },
            child(){
                alert('this is child')
            }
        }
    })
</script>


</html>

预览效果:

index2.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }

    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    

<script src="../../libs/vue.js"></script>
<script>
/*
解决方法一 :
在vue级子级元素绑定事件用阻止冒泡, @click.stop="fn"
*/
</script>
</head>
<div id="app">
   <ul class="parent"   @click="parent">
       <li class="child" @click.stop="child">1</li>
       <!--在子元素中，绑定一个阻止冒泡的点击事件 @click.stop-->
       <li class="child" @click.stop="child">2</li>
       <li class="child" @click.stop="child">3</li>
       
   </ul>
</div>

<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
                alert('this is parent')
            },
            child(){
                alert('this is child')
            }
           
        }
    })
</script>




</html>

index3.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }

    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    

<script src="../../libs/vue.js"></script>
<script>
/*
解决方式二: vue父级元素绑定事件, 传入$event参数
在父级绑定的件事处理方法中, 进行判断event.currentTarget 与event.target 是不是全等
如果全等, 就说明是父级上触发的点击事件

event.currentTarget -- 绑定事件的dom
event.target        -- 当前点击的dom

*/
</script>

</head>
<div id="app">
   <ul class="parent" @click="parent($event)">
       <li class="child" @click="child">1</li>
       <li class="child" @click="child">2</li>
       <li class="child" @click="child">3</li>
   </ul>
</div>

<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(event){
                let event1 = event.currentTarget;
                let event2 = event.target;
                if(event1 == event2) {
                    alert('this is parent')
                }
            },
            child(){
                alert('this is child')
            }
        }
    })
</script>


</html>

index4.html

<html>
<head>
<style>
    .parent{
        width:200px;
        background:#ffc;
    }

    .child{
        list-style: none;
        border:1px solid red;
    }
</style>    

<script src="../../libs/vue.js"></script>
<script>
/*
解决方式三: 子元素绑定事件传入$event , 处理器中进行阻止冒泡传递
event.stopPropagation();
*/
</script>

</head>
<div id="app">
   <ul class="parent" @click="parent">
       <li class="child" @click="child($event)">1</li>
       <li class="child" @click="child($event)">2</li>
       <li class="child" @click="child($event)">3</li>
   </ul>
</div>

<script>
    var App = new Vue({
        el:"#app",
        data:{},
        methods:{
            parent(){
               alert('this is parent')
            },
            child(event){
                alert('this is child');
                event.stopPropagation();
            }
        }
    })
</script>


</html>

phpzx.cn

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue子元素绑定的事件, 阻止触发父级上的事件处理

index1.html<html><head><style> .parent{ width:200px; background:#ffc; } .child{ list-style: none; border:1px solid red; }</style> <script src="../../libs/vue.js"><
复制链接

扫一扫

专栏目录